<template>
	<view class="flex-col justify-start page">
		<view class="flex-col " :class="zimuPop ? 'section-zimu' : 'section'">
			
			<u-navbar title="创作" :is-back="false" title-color="#fff" :background="background"></u-navbar>

			<view class="flex-col self-stretch items-center " :class="zimuPop ? 'group-zimu' : 'group'">
				<view class="flex-row" style="width: 100%;" :class="zimuPop ? 'flex-row justify-center' : ''">
					<view class="flex-col items-center section_2_wrap" style=""
						:style="zimuPop ? 'width: 370rpx;' : 'width: 70%;'">
						<view v-if="!videoPath" class="flex-col items-center justify-center section_2"
							@click="checkPur(1)">
							<view class="">
								<image class="add-video-img"
									src="https://terminator.axu9.com/images/add-video-img.png" />
							</view>
							<view class="flex-row items-center justify-center">
								<image class="self-start image_2"
									src="https://terminator.axu9.com/images/add-icon1.png" />
								<text class="self-center font">添加视频</text>
							</view>

						</view>
						
						<movable-area v-if="videoPath" class="movable-class" style="height: 656rpx;width: 370rpx;">
							<view class="flex-row justify-center video-wrap relative">
							
								<image :src="videoThumbnail" class="video-class" mode=""></image>
								<!-- <video :play-strategy="1" class="video-class" :src="videoPath" controls="controls"
									id="video" object-fit="cover" @loadedmetadata="onVideoLoaded">
									

								</video> -->

								<view class="del-video" @click="delVideo" style="z-index: 999;">
									<image class="self-start del-img"
										src="https://terminator.axu9.com/images/del-video-icon.png" />
								</view>
								<view @click="openVideoPop" class="play-img-wrap">
									<image class="self-start play-img"
										src="../../static/image/other/play-video-icon.png" />
								</view>
							</view>
							<!-- :style="{'background':backgroundColor,'width': MovableViewW+'rpx'}" :x="x" :y="y" -->
							<movable-view :animation="false" v-if="isZimu" class="A-B"
								:style="{'background':backgroundColor}" :x="x" :y="y" :scale="false" direction="all"
								@change="onChangeMV" @click="openZimuPop">
								<view class="" style="display: flex;">
									<!-- <input type="text" placeholder="请在脚本区编辑您的正文" class="input-class"
										placeholder-class="placehoder-class" :style="{colo}"/> -->
									<!-- <text
										:style="{'font-family':font,'font-size':fontSizeValue+'rpx','-webkit-text-fill-color':colorselect,'text-shadow':(--strokeWidth) + 'px ' + (-strokeWidth) + 'px 0 ' + strokeColor+ ',' +(-strokeWidth) + 'px ' + (--strokeWidth) + 'px 0 ' + strokeColor + ',' +(--strokeWidth) + 'px ' + (-strokeWidth) + 'px 0 ' + strokeColor + ',' +(-strokeWidth) + 'px ' + (-strokeWidth) + 'px 0 ' + strokeColor}">视频字幕信息</text> -->
									<!-- <text class="text111" data-content="视频字幕信息" style="color: white;font-size: 60rpx;" :style="{'-webkit-text-stroke':strokeWidth+'px '+strokeColor,'font-family':font,'font-size':fontSizeValue+'rpx','-webkit-text-fill-color':colorselect,}">视频字幕信息</text> -->
									<text class="text111" data-content="视频字幕信息"
										:style="{'--color': strokeColor,'--width':  strokeWidth+ 'px','color': colorselect,'fontSize': fontSizeValue+'rpx','font-family':font,}">视频字幕信息</text>
									<!-- <div :style="{'--color': strokeColor,'--width':  strokeWidth+ 'px','color': colorselect,'fontSize': fontSizeValue+'rpx','font-family':font}">2023, 新年快乐!</div> -->

								</view>
								<!-- <view class="top-square"></view>
								<view class="bottom-square"></view>
								<view class="left-square"></view>
								<view class="right-square"></view>
								<view class="rg-top-circle"></view>
								<view class="lf-bottom-circle"></view>
								<view class="rg-bottom-circle"></view> -->
								<view @click.stop="closeZimu" class="close-icon">
									<image src="https://terminator.axu9.com/images/zimu_close.png" class="image-close"
										mode="">
									</image>
								</view>
							</movable-view>
						</movable-area>


						<!-- <movable-area class="A" style="width: 484rpx;height: 875rpx;">
							<video :play-strategy="1" class="video-class" style="width: 100%;height: 100%;" :src="videoPath"
								controls="controls"></video>
							<movable-view class="A-B" :style="{'background':backgroundColor}" :x="x" :y="y" :scale="true" direction="all"
								:scale-value="scaleValue" @change="onChange">
								<view class="">
									<text :style="{'font-family':font,'font-size':fontSizeValue+'rpx','-webkit-text-fill-color':colorselect,'text-shadow':(--strokeWidth) + 'px ' + (-strokeWidth) + 'px 0 ' + strokeColor+ ',' +(-strokeWidth) + 'px ' + (--strokeWidth) + 'px 0 ' + strokeColor + ',' +(--strokeWidth) + 'px ' + (-strokeWidth) + 'px 0 ' + strokeColor + ',' +(-strokeWidth) + 'px ' + (-strokeWidth) + 'px 0 ' + strokeColor}">视频字幕信息</text>
						
								</view>
								<view class="top-square"></view>
								<view class="bottom-square"></view>
								<view class="left-square"></view>
								<view class="right-square"></view>
								<view class="rg-top-circle"></view>
								<view class="lf-bottom-circle"></view>
								<view class="rg-bottom-circle"></view>
								<view class="close-icon">
									<image src="https://terminator.axu9.com/images/zimu_close.png" class="image-close" mode="">
									</image>
								</view>
							</movable-view>
						</movable-area> -->





					</view>


					<!-- height: 656rpx; -->
					<view v-if="!zimuPop" class="flex-col items-center" style="width: 30%;">
						<!-- style="height: 620rpx;" -->
						<scroll-view scroll-y class="flex-col" style="height: 620rpx;"
							v-if="historyVideoList.length > 0" @scrolltolower="reachBottom">
							<!-- <view class="flex-col history-list"> -->

							<view class="flex-col" style="position: relative;width: 140rpx;margin-top: 20rpx;"
								@click="selectVideo(item.video,index,item.type,item.img)"
								v-for="(item,index) in historyVideoList">
								<!-- <video :play-strategy="1" :class="currentVideoIndex == index ? 'border-green' : ''" :src="item.video" object-fit="cover"
										class="video-poster" :show-center-play-btn="false" :controls="false" :vslide-gesture-in-fullscreen="false"></video> -->
								<image :class="currentVideoIndex == index ? 'border-green' : ''" :src="item.img"
									class="video-poster" mode="aspectFill"></image>
								<view class="close-video-img-wrap" @click.stop="openDelModel(item.id)">
									<image class="close-video-img"
										src="https://terminator.axu9.com/images/close-icon-white-video.png" mode="">
									</image>
								</view>
							</view>
							<!-- </view> -->
						</scroll-view>

					</view>
				</view>
				<view class="flex-row justify-center" style="width: 100%;margin-top: 20rpx;">
					<view v-if="!zimuPop" class="flex-row justify-start" style="width: 70%;white-space: nowrap;">
						<u-radio-group v-model="modeValue" @change="radioGroupChange">
							<u-radio v-for="(item, index) in modeList" :key="index" :name="item.name" shape="circle"
								active-color="#00e090" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
					<view v-if="!zimuPop" class="flex-row justify-end">
						<u-checkbox-group @change="zimuChange">
							<u-checkbox v-model="isZimu" name="zimu" shape="circle" :disabled="iszimuDisabled"
								active-color="#00e18e">字幕</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<!-- #ifdef APP -->
				<!-- <view style="color: white;" class="" @click="toTest">
					111
				</view> -->
				<!-- #endif -->
				
				<view v-if="!zimuPop" class="mt-10 flex-col self-stretch section_3">
					<view class="flex-row justify-between items-center">
						<text class="self-start font" style="height: 60rpx;line-height: 60rpx;">音频内容</text>
						<view class="select-audio" @click="toAudioHome">
							选择音频
						</view>
					</view>
					<view v-if="audioTitle == ''" class="flex-col justify-start self-stretch mt-10"
						@click="checkPur(2)">
						<view class="section_4 flex-row items-center">
							<image class="image_3" src="https://terminator.axu9.com/images/add-icon1.png" />
							<text class="text_2">添加音频</text>
						</view>

					</view>

					<view v-else class="flex-col justify-start self-stretch mt-10" @click="playAudio">
						<view class="flex-row items-center section_33 justify-between"
							:class="isPlay == true ? 'border-green' : ''">
							<view class="flex-row items-center section_33_lf">
								<image class="image_33"
									src="https://terminator.axu9.com/images/audio-select-icon.png" />
								<view class="flex-col justify-center" style="width: 60%;">
									<text class="text_44 ml-3-5">{{audioTitle}}</text>
									<text class="text_44 ml-3-5" style="margin-top: 10rpx;">{{duration}}</text>
								</view>
								<!-- <text class="text_44 ml-3-5">{{audioTitle}}</text> -->
								<text v-if="audioHCStatus == 0" class="text_status">生成中...</text>
								<text v-if="audioHCStatus == 2" class="text_status">失败</text>
								<text v-if="audioHCStatus == 3" class="text_status">音色下架</text>
							</view>

							<image @click.stop="delAudio" class="image_34"
								src="https://terminator.axu9.com/images/del-icon-white.png" />
						</view>

					</view>
				</view>
			</view>
			<!-- 字幕样式选择 -->
			<view class="bottom-pop" v-if="zimuPop" :style="{'max-height':bottomPopHeight + 'rpx'}">
				<view class="" style="height: 100%;">
					<view class="bt-title flex-row justify-between" style="height: 100rpx;">
						<view class="bt-title-lf" @click="tap">
							样式
						</view>
						<view class="bt-title-img" @click="closeZimuPop">
							<image class="image-ok" src="https://terminator.axu9.com/images/zimu_ok@2x.png" mode="">
							</image>
						</view>
					</view>


					<view class="bottom-pop-content" :style="'max-height:'+ bottomPopHeightCont + 'rpx' "
						style="overflow-y: scroll;">
						<!-- 描边阴影 -->
						<view class="stoke flex-row">
							<image @click="closeYinYing" src="https://terminator.axu9.com/images/zimu_nocss.png"
								class="nocss-image" mode=""></image>
							<!-- <p v-for="(item,index) in stokeList" :key="index"
								class="stroked-text flex-row items-center justify-center"
								:class="currentMiao == index ? 'border-green' : ''" style="filter: url(#textStroke);"
								:style="{'-webkit-text-fill-color':item.color,'text-shadow':(-item.stroke_width) + 'px ' + (-item.stroke_width) + 'px 0 ' + item.stroke_color+ ',' +(item.stroke_width) + 'px ' + (-item.stroke_width) + 'px 0 ' + item.stroke_color + ',' +(-item.stroke_width) + 'px ' + (item.stroke_width) + 'px 0 ' + item.stroke_color + ',' +(item.stroke_width) + 'px ' + (item.stroke_width) + 'px 0 ' + item.stroke_color}"
								@click="changeMiao(item,index)">
								A
							</p> -->
							<p v-for="(item,index) in stokeList" :key="index"
								class="stroked-text flex-row items-center justify-center"
								:class="currentMiao == index ? 'border-green' : ''" style="filter: url(#textStroke);"
								:style="{'-webkit-text-fill-color':item.color,'text-shadow':(-item.stroke_width) + 'rpx ' + (-item.stroke_width) + 'rpx 0 ' + item.stroke_color+ ',' +(item.stroke_width) + 'rpx ' + (-item.stroke_width) + 'rpx 0 ' + item.stroke_color + ',' +(-item.stroke_width) + 'rpx ' + (item.stroke_width) + 'rpx 0 ' + item.stroke_color + ',' +(item.stroke_width) + 'rpx ' + (item.stroke_width) + 'rpx 0 ' + item.stroke_color}"
								@click="changeMiao(item,index)">
								A
							</p>
							<!-- <p v-for="(item,index) in stokeList" :key="index"
								class="text111 stroked-text flex-row items-center justify-center"
								:class="currentMiao == index ? 'border-green' : ''" data-content="A"
								:style="{'--color': item.stroke_color,'--width':  item.stroke_width+ 'px','color': item.color,}"></p> -->


						</view>
						<view class="flex-row">
							<view class="yk_fontUl flex-row">


								<!-- <image @click="closeFont" src="https://terminator.axu9.com/images/zimu_nocss.png"
									class="nocss-image" mode=""></image> -->
								<view @click="closeFont" class="yk_fontli"
									style="font-size: 40rpx;color: #fff;height: 64rpx;width: 120rpx;justify-content: center;"
									:class="font == 'default' ? 'border-green': ''">
									系统
								</view>
								<view class="yk_fontli" :class="currentFont == index ? 'border-green' : ''"
									v-for="(item,index) in fontList" :key="index" :style="{'font-family':item.fontId}"
									@click="changeFont(item,index)">
									<!-- <view class="yk_fontTilte flex-row items-center justify-center" style="color: #fff;">
										{{item.fontName}}
									</view> -->
									<image :src="item.img" style="height: 40rpx;" mode="heightFix"></image>
								</view>
							</view>
						</view>
						<!-- 样式 -->
						<view class="flex-col csstype-list">
							<view class="flex-row">
								<view class="csstype-list-item" v-for="(item,index) in cssTypeList" :key="index"
									:class="cssType == index ? 'csstype-list-item.active' : ''"
									@click="changeCssType(index)">
									{{item}}
								</view>
							</view>
							<view class="color-list color-list-tb flex-row items-center">
								<image src="https://terminator.axu9.com/images/no-color-icon.png"
									@click="closeColorOrYin" class="no-color-icon" mode="">
								</image>
								<!-- <view class="color-list-item" v-for="(item,index) in colorList" :key="index"
									:style="'background: ' + item"
									:class="colorCurrent == index ? 'color-list-item-active' : ''"
									@click="changeColor(item,index)">

								</view> -->
								<view class="color-list flex-row items-center" v-if="cssType == 0">
									<view class="color-list-item" v-for="(item,index) in colorList" :key="index"
										:style="'background: ' + item"
										:class="fontColorCurrent == index ? 'color-list-item-active' : ''"
										@click="changeFontColor(item,index)">

									</view>
								</view>
								<view class="color-list flex-row items-center" v-if="cssType == 1">
									<view class="color-list-item" v-for="(item,index) in colorList" :key="index"
										:style="'background: ' + item"
										:class="miaoColorCurrent == index ? 'color-list-item-active' : ''"
										@click="changeMiaoColor(item,index)">

									</view>
								</view>
							</view>

							<view class="csstype-list-slider-wrap flex-row items-center justify-between"
								v-if="cssType == 0">
								<text class="csstype-list-slider-text">字号</text>
								<view class="csstype-list-slider">
									<!-- <u-slider v-model="fontSizeValue" min="24" max="60" active-color="#00FF00"></u-slider> -->
									<uv-slider v-model="fontSizeValue" min="28" max="50" step="2" activeColor="#00FF00"
										@change="changeFontSize"></uv-slider>
								</view>
								<text class="csstype-list-slider-text1">{{fontSizeValue / 2}}</text>
							</view>
							<view class="csstype-list-slider-wrap flex-row items-center justify-between"
								v-if="cssType == 1">
								<text class="csstype-list-slider-text">粗细</text>
								<view class="csstype-list-slider">
									<!-- <u-slider v-model="fontSizeValue" min="24" max="60" active-color="#00FF00"></u-slider> -->
									<uv-slider v-model="strokeWidth" step="2" min="0" max="6" activeColor="#00FF00"
										@change="changeStrokeWidth"></uv-slider>
								</view>
								<text class="csstype-list-slider-text1">{{strokeWidth / 2}}</text>
							</view>
						</view>

					</view>

				</view>

			</view>

			<view v-if="!zimuPop" class="flex-col justify-start items-center group_2">
				<view class="num">
					本次合成需要<text class="num-green">{{score}}</text>分
				</view>
				<!-- <view @click="create" v-if="!isLoading" class="section_5 flex-row justify-center items-center">
					<text class="font">生成</text>
				</view>
				<view v-else class="section_5 flex-row justify-center items-center">
					<text class="font">生成1111</text>
				</view> -->
				<view @click="create" class="section_5 flex-row justify-center items-center">
					<text class="font">生成</text>
				</view>
				<view class="num mt-10 flex-row items-center">
					<image v-if="!checked" @click="changAgree" class="image_check"
						src="https://terminator.axu9.com/images/uncheck.png" />
					<image v-else @click="changAgree" class="image_check"
						src="https://terminator.axu9.com/images/checked.png" />
					<text class="agreement-text1">我知晓同意</text>
					<text @click="toAgreement" class="agreement-text2">《{{createAgreeTitle}}》</text>
				</view>
			</view>

			<!-- 登录弹窗 -->
			<ns-login ref="login" @loginSuccess="loginSuccess"></ns-login>
			<!-- 绑定手机号弹窗 -->
			<bind-phone ref="bindPhone" @bindSuccess="bindSuccess"></bind-phone>
			<!-- 展示消耗积分 生成时长弹窗 -->
			<showIntegalPop ref="integalPop" :integal="score" @confirm="showIntegalConfirm" @cancel="showIntegalCancel">
			</showIntegalPop>
			<!-- ios手机上传视频提示弹窗 -->
			<iosVideoPopTips ref="iosTipsPop"></iosVideoPopTips>
			<!-- 上传视频进度条弹窗 -->
			<progressPop ref="progressPop" :isShow="true" :percent="percent" @cancel="showProgressCancel"></progressPop>
			<!-- showLoading加载弹窗 -->
			<loadingPop ref="loadingPop"></loadingPop>

			<!-- <u-popup mode="bottom" v-model="zimuPop" :mask-close-able="false" :mask="false">
				<view class="content" style="background-color: #fff;">
					<scroll-view scroll-y="true" style="height: 300rpx;">
						<view>
							<view v-for="index in 20" :key="index">
								第{{index}}个Item
							</view>
						</view>
					</scroll-view>
					<view class="confrim-btn">
						<u-button @click="show = false;">确定</u-button>
					</view>
				</view>
			</u-popup> -->
			
			<u-popup v-model="videoUrlPopShow" mode="center" :closeable="true" width="680" close-icon-color="#fff">
				<view style="width: 680rpx;height: 70vh;display: flex;align-items: center;">
					<video :autoplay="true" :play-strategy="1" style="width: 650rpx;height: 50vh;" :src="videoPath" controls="controls"
						 @loadedmetadata="onVideoLoaded"></video>
				</view>
			</u-popup>

		</view>
	</view>
</template>

<script>
	import nsLogin from "../../components/ns-login/ns-login.vue";
	import bindPhone from "../../components/bindPhone/index.vue";
	import showIntegalPop from "../../components/showIntegalPop/index.vue";
	import iosVideoPopTips from "../../components/iosVideoPopTips/index.vue";
	import progressPop from "../../components/progressPop/index.vue";
	import loadingPop from "../../components/loadingPop/index.vue"
	import {
		getAudioDuration,
		lipsync,
		VideoAnimate,
		newShipin,
		verify,
		videoLog,
		videoList,
		videoDelHist,
		getAgreement,
		addCaptions
	} from "@/api/video.js"
	import {
		mp3Status
	} from "@/api/audio.js"
	import {
		checkUserInfo,
		getQiniuToken,
		getUserinfo
	} from "@/api/user.js"
	import {
		completQiniuUploadUrl,
		qiniuDomainUrlD,
		baseURL1
	} from "@/api/request.js"
	// #ifdef APP
	import {
		callVideoFrameInfo
	} from '@/uni_modules/lxw-video-frame';
	// #endif
	
	import {
		pathToBase64,
		base64ToPath
	} from '@/node_modules/image-tools/index.js'
	// import auth from 'common/js/auth.js';
	export default {
		data() {
			return {
				themeColor: 'blue',
				zimuPop: false, //字幕样式类弹窗
				zimuResult: [], //字幕选中数组
				modeValue: '',
				modeList: [{
						name: '标清',
						disabled: false,
						checked: false
					},
					{
						name: '高清',
						// name: '高清',
						disabled: false,
						checked: false
					}
				],
				videoPath: '', //视频路径
				videoThumbnail: '',//视频缩略图
				audioUrl: '', //音频路径
				videoTitle: '', //视频标题
				// voiceName: '职场女性职场箴言.mp3',
				audioTitle: '',
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				score: 0,
				showPop1: false, //设置视频标题弹窗
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 1)'
				},
				audioIndex: -1, //播放的index
				innerAudioContext: null,
				playIndex: -1, //点击的index
				isPlay: false, //false未播放 true播放中 
				audioId: '', //音频id
				timer: null, //定时器--查看生成音频状态
				audioHCStatus: 1, //0生成中 1成功 2失败 3音色下架
				duration: '', //时长
				isLoading: false, //false可以点击确定按钮 true不可以点击
				historyVideoList: [], //历史视频记录
				currentVideoIndex: -1,
				progress: uni.getStorageSync("progress"),
				yTime: 0, //预计生成时间
				page: 1, //分页--当前页数
				totalPage: 1, //分页--总页数
				percent: 0, //进度条
				uploadTask: null, //上传视频任务
				checked: false, //创作协议是否勾选 false未勾选 true勾选
				createAgreeTitle: '用户视频创作协议', //视频创作协议标题
				showPop1: true,
				level: 0, //身份 0普通用户 1激活用户 2银牌 3金牌
				isZimu: false, //是否添加字幕
				iszimuDisabled: false, //字幕复选框是否禁用 true禁用 false不禁用

				// colorCurrent: -1,
				fontColorCurrent: -1, //字体颜色选中下标
				miaoColorCurrent: -1, //描边颜色下标

				// colorList: [
				// 	'#F0F8FF', '#FAEBD7', '#FFEFDB', '#EEDFCC', '#8B7355', '#00FFFF', '#7FFFD4', '#7FFFD4',
				// 	'#76EEC6', '#66CDAA', '#458B74', '#F0FFFF', '#F0FFFF', '#E0FFFF', '#F5F5DC', '#FFE4C4',
				// 	'#FFE4C4', '#EED5B7', '#CDB79E', '#8B7D6B', '#000000', '#FFEBCD', '#0000FF', '#0000FF', 
				// 	'#0000EE', '#0000CD', '#00008B', '#8A2BE2', '#A52A2A', '#FF4040', '#EE3B3B', '#CD3333',
				// 	'#8B2323', '#DEB887', '#FFD39B', '#EEC591', '#CDAA7D', '#8B7355', '#5F9EA0', '#98F5FF',
				// 	'#8EE5EE', '#7AC5CD', '#53868B', '#7FFF00',  '#76EE00', '#66CD00', '#458B00',
				// 	'#D2691E', '#FF7F24', '#EE7621', '#CD661D', '#8B4513', '#FF7F50', '#FF7256', '#EE6A50',
				// 	'#CD5B45',  '#6495ED', '#FFF8DC', '#FFF8DC', '#EEE8CD', '#CDC8B1', '#8B8878',
				// 	'#DC143C',  '#00EEEE', '#00CDCD', '#008B8B', '#00008B', '#008B8B',
				// 	'#B8860B', '#FFB90F', '#EEA400', '#CD950C', '#8B6508', '#A9A9A9', '#006400', '#A9A9A9',
				// 	'#BDB76B', '#8B008B', '#556B2F', '#CAFF70', '#BCEE68', '#A2CD5A', '#6E8B3D', '#FF8C00',
				// 	  '#8B4500', '#9932CC', '#BF3EFF', '#B23AEE', '#9B30B2', '#68228B',
				// 	'#8B0000', '#E9967A', '#8FBC8F', '#C1FFC1', '#B4EEB4', '#A8DBA8', '#6C8C6C', '#483D8B',
				// 	'#2F4F4F', '#90EE90', '#70B270', '#4E8C4E', '#2F4F4F', '#00CED1', '#9400D3', 
				// 	'#FF1493', '#FF1493', '#EE1289', '#CD1076', '#8B0A50', '#00BFFF', '#009ACD', '#00688B',
				// 	'#696969', '#696969', '#1E90FF', '#1E90FF', '#1C86EE',  '#104E8B', '#B22222',
				// 	'#FF3030', '#EE2C2C', '#CD2626', '#8B1A1A', '#FFFAF0', '#228B22', '#B0E0E6', '#FF00FF', 
				// 	'#DCDCDC', '#F8F8FF', '#FFD700', '#EEC900',   '#DAA520',
				// 	'#FFC125', '#EEB422', '#CD9B2D', '#808080', '#000000', '#030303', '#1A1A1A',
				// 	'#FFFFFF', '#1C1C1C', '#1F1F1F', '#222222', '#242424', '#262626', '#292929', '#2B2B2B',
				// 	'#2E2E2E', '#303030', '#0A0A0A', '#333333', '#363636', '#383838', '#3B3B3B', '#3D3D3D',
				// 	'#404040', '#424242', '#444444', '#474747', '#4A4A4A', '#0D0D0D', '#4D4D4D', '#4F4F4F',
				// 	'#525252', '#545454', '#575757', '#5A5A5A', '#5C5C5C', '#5F5F5F', '#616161','#636363',

				// 	 '#101010', '#666'
				// ],
				colorList: [
					'#000000', '#1C1C1C', '#1F1F1F', '#2E2E2E', '#333333', '#404040', '#616161',
					'#8B8878', '#808080', '#A9A9A9',
					'#FFFFFF', '#FFFAF0', '#FFF8DC', '#FFF8DC', '#F0F8FF', '#F0FFFF', '#DCDCDC', '#F8F8FF',
					'#006400', '#228B22', '#458B00', '#66CD00', '#7FFF00', '#CAFF70', '#BCEE68', '#A2CD5A',
					'#76EEC6', '#458B74', '#8FBC8F', '#C1FFC1', '#00008B', '#0000CD', '#104E8B', '#1E90FF',
					'#6495ED', '#00BFFF', '#00EEEE', '#7FFFD4', '#E0FFFF', '#008B8B', '#483D8B', '#9932CC', '#68228B',
					'#8B008B', '#9400D3', '#8A2BE2', '#B23AEE', '#8B0000', '#A52A2A', '#CD5B45', '#FF4040',
					'#DC143C', '#CD2626', '#B22222', '#8B0A50', '#FF00FF', '#FF1493', '#FF1493', '#EE1289',
					'#CD1076', '#E9967A', '#FF8C00', '#FF7F24', '#EE7621', '#D2691E', '#FFC125',
					'#FFD700', '#DAA520', '#FFD39B', '#BDB76B', '#B8860B', '#8B6508',
					'#8B7355', '#8B7D6B', '#FFE4C4', '#FFEBCD', '#FFEFDB',
					'#FFE4C4', '#FAEBD7', '#F5F5DC', '#EEE8CD', '#EEDFCC', '#EED5B7',
				],
				fontSizeValue: 28,
				colorselect: '#FFFFFF',
				font: 'default',
				// strokeColor: '',
				// strokeWidth: '0',
				strokeColor: '#FFFFFF',
				strokeWidth: '0',
				strokeWidthValue: 0,
				backgroundColor: '',
				// cssTypeList: ['颜色', '描边', '填充', '排版'],
				cssTypeList: ['颜色', '描边'],
				cssType: 0, //样式当前选中
				x: 52,
				y: 297,
				old: {
					x: 0,
					y: 0
				},
				// MovableViewW: 180,
				MovableViewW: 370,
				MovableAreaH: 0, //视频区域高度
				MovableViewH: 0, //移动区域高度
				zhiwidth: 100, //Movable-view的初始宽度
				zhiheight: 100, //Movable-view的初始高度
				zhi: 1, //Movable-view的初始缩放比例
				zuixiaozhi: 0.5, //最小缩放比例
				zuidazhi: 2, //最大缩放比例
				startDistance: 0, //双指触摸起始距离
				currentDistance: 0, //双指触摸当前距离
				videoPath: 'https://audiovideo.axa2.com/lrODuPBDJ4DVf1rNQ5pEJLX7A1qX',
				scaleValue: 1,
				currentMiao: -1, //当前选中描边样式下标
				currentFont: -1, //当前选中字体下标
				stokeList: [{
						color: '#FFFFFF',
						stroke_color: "#FFFFFF",
						stroke_width: '2'
					},
					{
						color: '#000000',
						stroke_color: "#FFFFFF",
						stroke_width: '2'
					},
					{
						color: '#FFD700',
						stroke_color: "#000000",
						stroke_width: '2'
					},
					{
						color: '#FFB90F',
						stroke_color: "#8B1A1A",
						stroke_width: '2'
					},
					{
						color: '#000000',
						stroke_color: "#228B22",
						stroke_width: '2'
					},
					{
						color: '#7FFF00',
						stroke_color: "#000000",
						stroke_width: '2'
					},
					{
						color: '#000000',
						stroke_color: "#FF00FF",
						stroke_width: '2'
					},
					{
						color: '#E0FFFF',
						stroke_color: "#009ACD",
						stroke_width: '2'
					},
					{
						color: '#CD3333',
						stroke_color: "#000000",
						stroke_width: '2'
					},
					{
						color: '#0000FF',
						stroke_color: "#000000",
						stroke_width: '2'
					},
					{
						color: '#00CED1',
						stroke_color: "#FFFFFF",
						stroke_width: '2'
					},
					{
						color: '#8A2BE2',
						stroke_color: "#FFFFFF",
						stroke_width: '2'
					},
					{
						color: '#FF8C00',
						stroke_color: "#C1FFC1",
						stroke_width: '2'
					},
					{
						color: '#808080',
						stroke_color: "#00BFFF",
						stroke_width: '2'
					},
					{
						color: '#FF1493',
						stroke_color: "#F0FFFF",
						stroke_width: '2'
					},
				],
				fontList: [
					// {
					// 	fontId: 'default',
					// 	fontName: '默认字体',
					// 	img: 'https://terminator.axu9.com/images/default-ziti.png',
					// 	src: 'https://audiovideo.axa2.com/ziti/SourceHanSerifCN-Bold.otf'
					// },
					{
						fontId: 'dy-meihao',
						fontName: '抖音美好体',
						img: 'https://terminator.axu9.com/images/dy-meihao.png'
					},
					{
						fontId: 'az-paopao',
						fontName: '阿朱泡泡体',
						img: 'https://terminator.axu9.com/images/az-paopao.png',
						src: 'https://audiovideo.axa2.com/ziti/az-paopao.ttf'
					},
					// {
					// 	fontId: 'cefb-ti',
					// 	fontName: '苍耳非白',
					// 	img: 'https://terminator.axu9.com/images/cefb-ti.png'
					// },
					{
						fontId: 'hzct-shoushu',
						fontName: '欢字卡通手书',
						img: 'https://terminator.axu9.com/images/hzct-shoushu.png'
					},

					{
						fontId: 'hlbs-jian',
						fontName: '鸿雷板书简体',
						img: 'https://terminator.axu9.com/images/hlbs-jian.png'
					},
					{
						fontId: 'albb-puhui',
						fontName: '阿里巴巴普惠体',
						img: 'https://terminator.axu9.com/images/albb-puhui.png',
						src: 'https://audiovideo.axa2.com/ziti/albb-puhui.ttf'
					},
					{
						fontId: 'almm-fangyuan',
						fontName: '阿里妈妈方圆体',
						img: 'https://terminator.axu9.com/images/almm-fangyuan.png',
						src: 'https://audiovideo.axa2.com/ziti/az-paopao.ttf'
					},
					{
						fontId: 'hxy-erti',
						fontName: '汉仪贤二体',
						img: 'https://terminator.axu9.com/images/hxy-erti.png'
					},

					{
						fontId: 'pfpf-hutuPF',
						fontName: 'PF频凡糊涂体',
						img: 'https://terminator.axu9.com/images/pfpf-hutu.png'
					},
					{
						fontId: 'scjs-kangkang',
						fontName: '素材集市康康体',
						img: 'https://terminator.axu9.com/images/scjs-kangkang.png'
					},
					{
						fontId: 'scjs-kufang',
						fontName: '素材集市酷方体',
						img: 'https://terminator.axu9.com/images/scjs-kufang.png'
					},
					{
						fontId: 'wdpljb-song',
						fontName: '文鼎PL简报宋',
						img: 'https://terminator.axu9.com/images/wdpljb-song.png'
					},
					{
						fontId: 'wzs-fang',
						fontName: '问藏书房',
						img: 'https://terminator.axu9.com/images/wzs-fang.png'
					},
					{
						fontId: 'yrdz-shi',
						fontName: '杨任东竹石体',
						img: 'https://terminator.axu9.com/images/yrdz-shi.png'
					},
					{
						fontId: 'ysyr-xiaokai',
						fontName: '演示悠然小楷',
						img: 'https://terminator.axu9.com/images/ysyr-xiaokai.png'
					},
					{
						fontId: 'yz-zi',
						fontName: '悠哉字体',
						img: 'https://terminator.axu9.com/images/yz-zi.png'
					},
					{
						fontId: 'zk-kuaile',
						fontName: '站酷快乐体',
						img: 'https://terminator.axu9.com/images/zk-kuaile.png'
					},
					{
						fontId: 'ztcq-tezhan',
						fontName: '字体传奇特战体',
						img: 'https://terminator.axu9.com/images/ztcq-tezhan.png'
					},
					{
						fontId: 'ztsj-fagun',
						fontName: '字体视界法棍体',
						img: 'https://terminator.axu9.com/images/ztsj-fagun.png'
					},

				],
				widthRat: 1,
				heightRat: 1,
				bottomPopHeight: 0, //底部样式高度
				bottomPopHeightCont: 0, ///底部样式高度
				videoHeight: 0, //获取视频高度 px
				videowidth: 0, //获取视频高度 px
				platform: 'android', //ios苹果 android安卓
				videoUrlPopShow: false,//查看视频弹窗
			}
		},
		components: {
			nsLogin,
			bindPhone,
			showIntegalPop,
			iosVideoPopTips,
			progressPop,
			loadingPop
		},
		watch: {

			// videoPath(newValue, oldValue) {
			// 	console.log('oldValue:', oldValue, 'newValue:', newValue, '监听videoPath')
			// 	if (newValue == '' || this.audioUrl == '') {
			// 		this.iszimuDisabled = true
			// 		this.isZimu = false
			// 	} else {
			// 		this.iszimuDisabled = false
			// 	}
			// },
			// audioUrl(newValue, oldValue) {
			// 	console.log('oldValue:', oldValue, 'newValue:', newValue, '监听videoPath')
			// 	if (newValue == '' || this.videoPath == '') {
			// 		this.iszimuDisabled = true
			// 		this.isZimu = false
			// 	} else {
			// 		this.iszimuDisabled = false
			// 	}
			// },
			videoPath(newValue, oldValue) {
				console.log('oldValue:', oldValue, 'newValue:', newValue, '监听videoPath')

				if (newValue != '') {
					// this.getVideoInfo()
					// const query = wx.createSelectorQuery()
					// query.select('.video-class').boundingClientRect(function(rect) {
					// 	console.log(rect, 'hahahahahhahahhaahah')
					// 	// this.videoHeight = rect.height
					// 	// this.videowidth = rect.width
					// }).exec()
					this.getHeightByClassName('section_2_wrap')

				}
				if (newValue != '' && this.isZimu == true) {
					this.getHeightByClassName('A-B')
					// this.zimuPop = true
				} else {
					this.zimuPop = false
				}
			},
			isZimu(newValue, oldValue) {
				console.log('isZimu:', oldValue, 'newValue:', newValue, '监听videoPath')
				this.getHeightByClassName('A-B')
				if (newValue == true && this.videoPath != '') {
					// this.zimuPop = true

				} else {
					this.zimuPop = false
				}
			},
			zimuPop(newValue, oldValue) {
				if (newValue == true) {
					uni.hideTabBar();
				} else {
					uni.showTabBar();
				}

			}
		},
		mounted() {
			this.getHeightByClassName1('section_2_wrap')
			this.getCanOptScreenHeight1();
		},
		onShow() {
			// this.rpxTranPt(28)
			// this.getHeightByClassName1('section_2_wrap')
			// this.getCanOptScreenHeight1();
			if (!uni.getStorageSync("videoMode")) {
				uni.setStorageSync("videoMode", '标清')
			}
			this.checked = uni.getStorageSync("createAgreeCheck") ? uni.getStorageSync("createAgreeCheck") : false;
			this.modeValue = uni.getStorageSync("videoMode") ? (uni.getStorageSync("videoMode").includes("高清") ? "高清" :
				"标清") : '标清'
			// setTimeout(()=>{
			// 	this.progress = 20
			// },2000)
			// this.progress = uni.getStorageSync("progress")
			// this.$refs.bindPhone.open();
			// uni.hideLoading();
			// this.showPop1 = false;
			console.log(this.audioUrl, 'this.audioUrl')
			// #ifdef MP-WEIXIN
			if (!uni.getStorageSync("userId")) {
				uni.hideShareMenu({
					menus: ['shareAppMessage']
				})
			} else {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage']
				})
			}
			// #endif

			if (!uni.getStorageSync('userId')) {
				// #ifdef APP || H5
				uni.navigateTo({
					url: '/pages/login/index'
				})
				// #endif
				// #ifdef MP-WEIXIN
				this.$refs.login.open()
				// #endif

				return
			}
			if (this.audioId != '') {
				this.getAudioStatus();

				this.timer = setInterval(() => {
					this.getAudioStatus();
				}, 1000)

			}
			console.log(this.innerAudioContext, !this.innerAudioContext, 'this.innerAudioContext')
			this.historyVideoList = [];
			this.page = 1;
			this.getVideoList();
			this.getXieyi();
			this.getUserinfo();
			// this.getCanOptScreenHeight()
			// if(!this.innerAudioContext){
			// 	this.contextInit();
			// }
			var zimuInfo = uni.getStorageSync("zimuInfo")
			this.fontSizeValue = zimuInfo ? zimuInfo.fontSizeValue : 28
			this.colorselect = zimuInfo ? zimuInfo.colorselect : '#FFFFFF'
			this.font = zimuInfo ? zimuInfo.font : 'default'
			this.strokeColor = zimuInfo ? zimuInfo.strokeColor : '#FFFFFF'
			this.strokeWidth = zimuInfo ? zimuInfo.strokeWidth : '0'
			this.strokeWidthValue = zimuInfo ? zimuInfo.strokeWidthValue : 0
			// this.cssType = zimuInfo ? zimuInfo.strokeColor : 0; //样式当前选中
			this.x = zimuInfo ? zimuInfo.x : 52
			this.y = zimuInfo ? zimuInfo.y : 297
			// this.colorCurrent = zimuInfo ? zimuInfo.colorCurrent : -1
			this.fontColorCurrent = zimuInfo ? zimuInfo.fontColorCurrent : -1;
			this.miaoColorCurrent = zimuInfo ? zimuInfo.miaoColorCurrent : -1;

			this.currentFont = zimuInfo ? zimuInfo.currentFont : -1;
			this.currentMiao = zimuInfo ? zimuInfo.currentMiao : -1;
			this.isZimu = zimuInfo ? zimuInfo.isZimu : false;
			this.MovableViewW = zimuInfo ? zimuInfo.MovableViewW : 180;
			this.getPlatform(); //获取手机信息

		},
		async onLoad(options) {
			console.log( 'create options',options)
			this.audioTitle = options.audioTitle ? options.audioTitle : '';
			this.audioUrl = options.audioUrl ? options.audioUrl : '';
			this.videoPath = options.videoPath ? options.videoPath : '';
			this.videoThumbnail = options.videoThumbnail ? options.videoThumbnail : '';
			this.modeValue = options.modeValue ? options.modeValue : '标清';
			this.audioId = options.audioId ? options.audioId : '';
			// this.duration = options.duration ? options.duration : '';
			// this.score = options.integral ? options.integral : 0;
			this.score = options.duration ? Math.ceil(options.duration) : 0;
			console.log(this.audioUrl, 'this.audioUrl')
			if (JSON.stringify(options) != '{}' && options.id) {
				console.log('走了么')
				uni.setStorageSync("parentId", options.id)
			}
			// // await this.contextInit();
			// if (this.audioUrl != '') {
			// 	this.getNeedScore(this.audioUrl)
			// }
		},
		created() {
			// this.contextInit();
		},
		// onUnload() {
		// 	console.log('onUnload')
		// },
		onHide() {
			console.log('onhide')
			this.$refs.login.close()
			// uni.hideLoading();
			if (this.timer) {
				clearInterval(this.timer)
			}
			if (this.innerAudioContext) {
				this.isPlay = false;
				// this.innerAudioContext.src = '';
				this.innerAudioContext.stop();
				this.innerAudioContext.destroy();
				this.innerAudioContext = null;
			}
			// this.$refs.iosTipsPop.close();
		},
		onUnload() {
			console.log('onUnload')
			if (this.innerAudioContext) {
				this.isPlay = false;
				// this.innerAudioContext.src = '';
				this.innerAudioContext.stop();
				this.innerAudioContext.destroy();
				this.innerAudioContext = null;
			}
		},
		beforeDestroy() {
			console.log('beforeDestroy', this.innerAudioContext)
			if (this.innerAudioContext) {
				this.isPlay = false;
				// this.innerAudioContext.src = '';
				this.innerAudioContext.stop();
				this.innerAudioContext.destroy();
				this.innerAudioContext = null;
			}
		},
		onShareAppMessage: function(res) {
			// 返回分享的内容
			let userId = uni.getStorageSync("userId") ? uni.getStorageSync("userId") : ''
			return {
				title: '创作', // 分享标题  
				path: '/pages/create/index?id=' + userId, // 分享路径，可以带参数  
				success: function(res) {
					// 设置成功  
				},
				fail: function(res) {
					// 设置失败  
				}
			}
		},
		onReady() {


		},
		// onShareTimeline(){},//分享朋友圈
		methods: {
			openVideoPop(){
				this.videoUrlPopShow = true;
			},
			// 获取实际视频的宽高
			getVideoInfo() {
				wx.createSelectorQuery().select('#video').context(res => {
					console.log('select video', res)
					this.video = res.context
				})
			},
			onVideoLoaded(event) {
				console.log(event, 'eventeventevent')
			},
			// 获取手机信息
			getPlatform() {
				var _this = this;
				// 获取手机系统信息
				uni.getSystemInfo({
					success: function(info) {
						console.log(info, 'info')
						_this.platform = info.platform == 'ios' ? 'ios' : 'android';

					}
				});
			},
			// // 获取可操作页面高度
			// getCanOptScreenHeight() {
			// 	// 获取系统信息
			// 	const systemInfo = wx.getSystemInfoSync();

			// 	// 屏幕总高度
			// 	const screenHeight = systemInfo.screenHeight;

			// 	// 状态栏高度
			// 	const statusBarHeight = systemInfo.statusBarHeight;

			// 	// 假设导航栏高度为固定值（这里需要根据实际情况调整）
			// 	// 如果你使用了 UniApp 提供的导航栏组件，需要查阅文档获取其高度
			// 	// 如果你自定义了导航栏，需要记录其高度
			// 	const navBarHeight = 44; // 这是一个常见的导航栏高度值，但可能不准确
			// 	// 计算页面可用高度
			// 	const usableHeight = screenHeight - statusBarHeight - navBarHeight;

			// 	// this.bottomPopHeight = usableHeight - this.videoHeight
			// 	// this.bottomPopHeightCont = usableHeight - this.videoHeight - 180
			// 	console.log(this.MovableAreaH,'this.MovableAreaH')
			// 	this.bottomPopHeight = usableHeight - this.MovableAreaH
			// 	this.bottomPopHeightCont = usableHeight - 180
			// 	// 输出到控制台（仅用于调试）
			// 	console.log('页面可用高度:', usableHeight,this.bottomPopHeight, this.bottomPopHeightCont);
			// },

			// 获取可操作页面高度1
			getCanOptScreenHeight1() {
				console.log('走了么')
				// 获取系统信息
				const systemInfo = wx.getSystemInfoSync();

				// 屏幕总高度
				const screenHeight = systemInfo.screenHeight;

				// 状态栏高度
				const statusBarHeight = systemInfo.statusBarHeight;

				// 假设导航栏高度为固定值（这里需要根据实际情况调整）
				// 如果你使用了 UniApp 提供的导航栏组件，需要查阅文档获取其高度
				// 如果你自定义了导航栏，需要记录其高度
				const navBarHeight = 44; // 这是一个常见的导航栏高度值，但可能不准确
				// 计算页面可用高度
				const usableHeight = screenHeight - statusBarHeight - navBarHeight;
				console.log(usableHeight, 'usableHeight')
				//// this.bottomPopHeight = usableHeight - this.videoHeight
				//// this.bottomPopHeightCont = usableHeight - this.videoHeight - 180
				// this.bottomPopHeightCont = usableHeight - 180
				// console.log(this.MovableAreaH,'this.MovableAreaH')
				console.log(screenHeight, statusBarHeight, navBarHeight)
				this.bottomPopHeight = (usableHeight - this.MovableAreaH) * 2 - 80
				this.bottomPopHeightCont = (usableHeight - this.MovableAreaH) * 2 - 180
				// 输出到控制台（仅用于调试）
				console.log('页面可用高度1111:', usableHeight, this.bottomPopHeight, this.bottomPopHeightCont);
			},
			// // 获取手机信息
			// getPhoneInfo(){
			// 	uni.getSystemInfo({
			// 			success: function(info) {
			// 				console.log(info, 'info')


			// 			}
			// 		});
			// },
			// 设置默认阴影参数
			closeYinYing() {
				this.colorselect = '#FFFFFF';
				// this.font = 'wqy-microhei';
				this.strokeColor = '#FFFFFF';
				this.strokeWidth = '0';
				this.currentMiao = -1;
			},
			// 设置默认字体
			closeFont() {
				this.font = 'default'
				this.currentFont = -1;

			},
			closeColorOrYin() {
				if (this.cssType == 0) {
					// 设置默认颜色
					this.colorselect = '#FFFFFF';
					// this.colorCurrent = -1
					this.fontColorCurrent = -1;
					// this.miaoColorCurrent = -1;
				} else if (this.cssType == 1) {
					this.strokeColor = '#FFFFFF';
					this.strokeWidth = '0';
					// this.colorCurrent = -1
					// this.fontColorCurrent = -1;
					this.miaoColorCurrent = -1;
				}
			},
			// 字体改变
			changeFontSize(e) {
				console.log(e, '字体改变')
				// this.MovableViewW = Math.ceil(e / 28 * 180)
			},
			// 描边粗细改变
			changeStrokeWidth(e) {
				console.log(e, '字体改变')
				// this.strokeWidth = e;
			},
			getHeightByClassName(className) {
				const query = uni.createSelectorQuery().in(this);
				query.select(`.${className}`).boundingClientRect(rect => {
					console.log(rect, 'rectrectrectrectrect')
					if (rect) {
						console.log('Height:', rect.height);
					} else {
						console.log('No elements found with class:', className);
					}
				}).exec();
			},
			getHeightByClassName1(className) {
				const query = uni.createSelectorQuery().in(this);
				query.select(`.${className}`).boundingClientRect(rect => {
					console.log(rect, 'rectrectrectrectrect')
					if (rect) {
						console.log('MovableAreaH:', rect.height);
						this.MovableAreaH = rect.height
						var rat = this.MovableAreaH / 328;
						this.MovableViewH = Math.ceil(31 * rat)
						console.log(this.MovableAreaH, this.MovableViewH, 'this.MovableViewH ')
					} else {
						console.log('No elements found with class:', className);
					}
				}).exec();
			},
			// 关闭字幕样式
			closeZimuPop() {
				this.zimuPop = false
				// uni.showTabBar()
				var zimuInfo = {
					fontSizeValue: this.fontSizeValue,
					colorselect: this.colorselect,
					font: this.font,
					strokeColor: this.strokeColor,
					strokeWidth: this.strokeWidth,
					x: this.x,
					y: this.y,
					// colorCurrent: this.colorCurrent,
					fontColorCurrent: this.fontColorCurrent,
					miaoColorCurrent: this.miaoColorCurrent,
					currentFont: this.currentFont,
					currentMiao: this.currentMiao,
					isZimu: this.isZimu,
					MovableViewW: this.MovableViewW

				}
				uni.setStorageSync("zimuInfo", zimuInfo)
				// this.fontSizeValue = zimuInfo ? zimuInfo.fontSizeValue : 28
				// this.colorselect =  zimuInfo ? zimuInfo.colorselect :'#FFFFFF'
				// this.font =  zimuInfo ? zimuInfo.font : 'default'
				// this.strokeColor = zimuInfo ? zimuInfo.strokeColor : '#FFFFFF'
				// this.strokeWidth = zimuInfo ? zimuInfo.strokeColor : '0'
				// this.strokeWidthValue = zimuInfo ? zimuInfo.strokeColor : 0
				// // this.cssType = zimuInfo ? zimuInfo.strokeColor : 0; //样式当前选中
				// this.x = zimuInfo ? zimuInfo.x : 52
				// this.y = zimuInfo ? zimuInfo.y : 297
				// this.colorCurrent = zimuInfo ? zimuInfo.colorCurrent : -1
				// this.currentFont = zimuInfo ? zimuInfo.currentFont : -1;
				// this.currentMiao = zimuInfo ? zimuInfo.currentFont : -1;
				// this.isZimu = zimuInfo ? zimuInfo.isZimu : false;
			},
			// 关闭字幕
			closeZimu() {
				this.zimuPop = false
				this.isZimu = false
				uni.showTabBar()
			},
			openZimuPop() {
				this.zimuPop = true
				this.getCanOptScreenHeight1()
				// this.getHeightByClassName('group-zimu');
				this.getHeightByClassName('movable-class')
				console.log('走了么111')
			},
			// 拖动区域改变
			onChangeMV(e) {
				this.x = e.detail.x
				this.y = e.detail.y
				var zimuInfo = {
					fontSizeValue: this.fontSizeValue,
					colorselect: this.colorselect,
					font: this.font,
					strokeColor: this.strokeColor,
					strokeWidth: this.strokeWidth,
					x: this.x,
					y: this.y,
					// colorCurrent: this.colorCurrent,
					fontColorCurrent: this.fontColorCurrent,
					miaoColorCurrent: this.miaoColorCurrent,
					currentFont: this.currentFont,
					currentMiao: this.currentMiao,
					isZimu: this.isZimu,
					MovableViewW: this.MovableViewW

				}
				uni.setStorageSync("zimuInfo", zimuInfo)
				// console.log(e.detail.y, this.MovableAreaH, this.MovableViewH, this.MovableAreaH - this.MovableViewH - e
				// 	.detail.y - 1)
				// var y = this.MovableAreaH - this.MovableViewH - e.detail.y - 1;
				// var marginV = Math.ceil((276 * y) / this.MovableAreaH)
				// console.log(y, marginV, 'marginVmarginVmarginVmarginV')
				var y = Number((this.y + (this.MovableViewH / 2) - 1) / this.MovableAreaH).toFixed(2)
				// console.log(e.detail.y,this.MovableViewH,this.MovableAreaH,y)

				// console.log(this.MovableViewH,this.MovableViewH,this.MovableAreaH - this.MovableViewH - e.detail.y - 1,'改变')
				// console.log([Number(this.x / 185).toFixed(2), Number(this.y / 328).toFixed(2)], 'kkkkkk')
				// console.log([Number((this.x) / 185).toFixed(2), Number((this.y) / 328).toFixed(2)], 'kkkkkk')
				// console.log([Number((this.x + 10) / 185).toFixed(2), Number((this.y < 297 ? this.y : this.y-23) / 328).toFixed(2)], 'kkkkkk11111')
			},
			// changeColor(item, index) {
			// 	this.colorCurrent = index;
			// 	if (this.cssType == 0) {
			// 		this.colorselect = item;
			// 	} else if (this.cssType == 1) {
			// 		this.strokeColor = item;
			// 		this.strokeWidth = '4';
			// 	} else if (this.cssType == 2) {
			// 		this.backgroundColor = item;
			// 	}

			// },
			// 点击切换字体颜色
			changeFontColor(item, index) {
				this.fontColorCurrent = index;
				this.colorselect = item;

			},
			// 点击切换描边颜色
			changeMiaoColor(item, index) {
				this.miaoColorCurrent = index;
				this.strokeColor = item;
				this.strokeWidth = '4';

			},
			// 切换类型-字体/描边
			changeCssType(index) {
				this.cssType = index;
				// this.colorCurrent = -1
			},
			// 切换描边样式
			changeMiao(item, index) {
				this.colorselect = item.color;
				this.strokeColor = item.stroke_color;
				this.strokeWidth = item.stroke_width;
				// this.colorCurrent = -1;
				this.fontColorCurrent = -1;
				this.miaoColorCurrent = -1;
				this.currentMiao = index;
			},
			// 切换字体
			changeFont(item, index) {
				this.font = item.fontId;
				// wx.loadFontFace({
				//   family: 'DFPWaWa-B5',
				//   source: 'url('+ item.src + ')',
				//   success: res => {
				//     console.log('font load success', res)
				//   },
				//   fail: err => {
				//     console.log('font load fail', err)
				//   }
				// })
				console.log(this.font, 'this.font')
				this.currentFont = index;
			},
			change(e) {
				console.log(e, 'eeeeee')
			},
			// openZimuPop
			// 字幕复选框变化
			zimuChange(e) {
				console.log(e, 'zimuChange', this.isZimu)
				if (this.isZimu && this.videoPath != '') {
					this.zimuPop = true;
				}
				// this.zimuResult = e
				if (uni.getStorageSync("zimuInfo")) {
					var zimuInfo = uni.getStorageSync("zimuInfo")
					zimuInfo.isZimu = this.isZimu
					uni.setStorageSync("zimuInfo", zimuInfo)
				} else {

				}
			},
			// 获取用户信息
			getUserinfo() {
				getUserinfo({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res.data, 'getUserinfo')
					this.level = res.data.level_id;
				}).catch(err => {

				})
			},
			// integralSubmit() {
			// 	if (this.isLoading) {
			// 		// 如果按钮在间隔时间内被点击，不执行操作并提示
			// 		uni.showToast({
			// 			title: '请勿重复点击',
			// 			icon: 'none',
			// 		});
			// 		return;
			// 	}
			// 	this.isLoading = true
			// 	console.log('jjjj')
			// 	setTimeout(() => {
			// 		this.isLoading = false;
			// 	}, 2000)
			// },
			// 跳转到协议
			toAgreement() {
				uni.navigateTo({
					url: '/pagesMine/agreement/index?type=4'
				})
			},
			// 视频创作协议
			getXieyi() {
				getAgreement({
					id: 4
				}).then(res => {
					if (res.errno == 0) {
						this.createAgreeTitle = res.data.title;
					}
				})
			},
			changAgree() {
				this.checked = !this.checked;
				uni.setStorageSync("createAgreeCheck", this.checked)
			},
			generateRandomString(length) {
				const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				let result = '';
				const charactersLength = characters.length;
				for (let i = 0; i < length; i++) {
					result += characters.charAt(Math.floor(Math.random() * charactersLength));
				}
				return result;
			},
			// 七牛上传接口封装
			uploadQiniuReauest(videoUrl, imgUrl) {
				// uni.showLoading({
				// 	title: '上传中'
				// })

				var timestamp = Date.now();
				var userId = uni.getStorageSync('userId');
				var name = userId + '/' + this.generateRandomString(8) + timestamp;

				var _this = this;
				getQiniuToken().then(res => {
					let token = res.data;
					console.log(res.data, '获取七牛token')
					_this.uploadTask = uni.uploadFile({
						filePath: videoUrl,
						name: 'file',
						url: completQiniuUploadUrl,
						timeout: 1000000,
						formData: {
							token: token,
							key: name
						},
						success: (uploadFileRes) => {
							uni.hideLoading()
							let logo = JSON.parse(uploadFileRes.data);
							console.log(logo, 'logo')
							if (logo.key) {
								console.log(qiniuDomainUrlD + logo.key, '上传路径');
								_this.videoPath = qiniuDomainUrlD + logo.key
								// resolve(qiniuDomainUrl + logo.key)
								_this.uploadImg(_this.videoPath, imgUrl);
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'error'
								})
								_this.$refs.progressPop.close();
							}

						},
						fail: (err) => {
							uni.hideLoading()
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
							// reject(err)
						}
					})
					// 监听上传进度  
					_this.uploadTask.onProgressUpdate((res) => {
						// this.uploadPercent = res.progress; // 更新进度条  
						// console.log('上传进度', res.progress);
						this.percent = res.progress;
						if (this.percent >= 100) {
							this.$refs.progressPop.close();
							setTimeout(() => {
								this.percent = 0;
							}, 1000)


						}
						// console.log('已经上传的数据长度', res.totalBytesSent);
						// console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
					});
				})


			},
			showProgressCancel() {
				console.log('关闭上传弹窗')
				this.uploadTask.abort();
				this.uploadTask = null;
			},
			// 视频记录触底事件
			reachBottom() {
				console.log('到底了')
				if (this.page < this.totalPage) {
					this.page++;
					this.getVideoList();
				} else {
					uni.showToast({
						title: '已加载全部',
						icon: 'none'
					})
				}
			},
			radioGroupChange(e) {
				console.log(e, '单选变化')
				this.modeValue = e;
				uni.setStorageSync("videoMode", e)
				//// e == '高清(上传慢)'
				//// ios高清弹弹窗
				// if (e == '高清') {
				// 	var _this = this;
				// 	// 获取手机系统信息
				// 	uni.getSystemInfo({
				// 		success: function(info) {
				// 			console.log(info, 'info')
				// 			var platform = info.platform;
				// 			if (platform == 'ios') {
				// 				_this.$refs.iosTipsPop.open();
				// 			}

				// 		}
				// 	});
				// }

			},
			// 选择视频
			selectVideo(video, index, type,img) {
				this.currentVideoIndex = index;
				this.videoPath = video;
				this.modeValue = type ? (type.includes("高清") ? '高清' : '标清') : '标清';
				this.videoThumbnail = img
				uni.setStorageSync("videoMode", this.modeValue)
			},
			openDelModel(id) {
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该视频么？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.delVideoHist(id);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 删除历史视频记录
			delVideoHist(id) {
				videoDelHist({
					id: id
				}).then(res => {
					if (res.errno == 0) {
						uni.showToast({
							title: '成功',
							icon: 'none',
							duration: 1000
						})
						this.historyVideoList = [];
						this.page = 1;
						this.getVideoList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			},
			// 获取历史视频记录
			getVideoList() {
				videoList({
					uid: uni.getStorageSync("userId"),
					page: this.page
				}).then(res => {
					console.log(res, '获取视频记录')
					if (res.errno == 0) {

						this.totalPage = res.data.last_page;
						this.historyVideoList = [...this.historyVideoList, ...res.data.data];
					}
				})
			},
			// 添加历史视频记录
			setVideoLog(videoUrl, imgUrl) {
				console.log('历史视频记录',videoUrl, imgUrl)
				videoLog({
					uid: uni.getStorageSync("userId"),
					video: videoUrl,
					img: imgUrl,
					type: this.modeValue
				}).then(res => {
					console.log(res, '添加历史视频记录')
					if (res.errno == 0) {
						this.historyVideoList = [];
						this.page = 1;
						this.getVideoList();
					}
				})
			},

			// 根据音频id获取生成音频状态
			getAudioStatus() {
				mp3Status({
					id: this.audioId,
				}).then(res => {
					console.log(res, '成功')
					this.audioHCStatus = res.data.status

					if (this.audioHCStatus == 1) {
						clearInterval(this.timer)
						this.audioUrl = res.data.mp3;
						this.score = res.data.integral;
						this.duration = res.data.duration;

						// this.getNeedScore(this.audioUrl)
					} else if (this.audioHCStatus == 2 || this.audioHCStatus == 3) {
						clearInterval(this.timer)
					}
				})
			},
			async contextInit() {
				let that = this;
				var innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = false;
				innerAudioContext.src = '';

				innerAudioContext.loop = false;
				innerAudioContext.onPlay(() => {
					that.isPlay = true;
					console.log('开始播放', that.audioIndex);
					uni.hideLoading();
				});
				innerAudioContext.onPause(() => {
					that.isPlay = false;
					console.log('暂停播放');
					uni.hideLoading();
				});
				innerAudioContext.onTimeUpdate(function(res) {
					// console.log(res, 'onTimeUpdate')
					// that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
				});
				innerAudioContext.onEnded(function() {
					that.isPlay = false;
					console.log('结束播放');
					// that.innerAudioContext.destroy();
					uni.hideLoading();
				});
				innerAudioContext.onStop(function() {
					that.isPlay = false;
					console.log('结束播放');
					// that.innerAudioContext.destroy();
					uni.hideLoading();
				});

				innerAudioContext.onError((res) => {
					console.log(res, 'error')

					uni.hideLoading();
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				});
				that.innerAudioContext = innerAudioContext
			},
			delVideo() {
				this.videoPath = ''
			},
			// 打开显示上传时间 消耗积分弹窗
			openShowIntegalPop() {
				console.log('hahah')
				this.$refs.integalPop.open();
			},
			// 确认显示上传时间 消耗积分弹窗
			showIntegalConfirm() {

				// this.isLoading = true;
				console.log(this.isLoading)
				var _this = this;
				_this.isVerify();
				// _this.submit()

				// uni.requestSubscribeMessage({
				// 	tmplIds: ['tyWKCHrX55ykOgzhxLedeItK3JK8p2SdPB4vuwDb4zw'],
				// 	success(res) {
				// 		console.log(res, 'success')
				// 	},
				// 	fail(err) {
				// 		console.log(err, 'fail')
				// 	},
				// 	complete(res) {
				// 		console.log(res, 'complete')
				// 		_this.submit();
				// 	}
				// })
			},
			// 取消显示上传时间 消耗积分弹窗
			showIntegalCancel() {
				this.isLoading = false;
			},
			// 校验是否可以生成视频
			isVerify() {
				var _this = this;
				// _this.isLoading = true;
				verify({
					uid: uni.getStorageSync("userId"),
					integral: this.score, //消耗的积分
					title: this.videoTitle, //视频标题
					audioUrl: this.audioUrl, //音频路径
					videoUrl: this.videoPath //视频路径
				}).then(res => {
					console.log(res, 'ddddddd')
					if (res.errno == 0) {
						// this.openShowIntegalPop();

						//// 订阅消息
						// uni.requestSubscribeMessage({
						// 	tmplIds: ['tyWKCHrX55ykOgzhxLedeItK3JK8p2SdPB4vuwDb4zw'],
						// 	success(res) {
						// 		console.log(res, 'success')
						// 	},
						// 	fail(err) {
						// 		console.log(err, 'fail')
						// 	},
						// 	complete(res) {
						// 		console.log(res, 'complete')
						// 		_this.submit();
						// 	}
						// })
						_this.submit();


					} else {
						_this.isLoading = false;
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				}).catch(err => {
					_this.isLoading = false;
				})
			},
			async playAudio() {
				if (this.audioHCStatus == 0) {
					uni.showToast({
						title: '音频暂未生成',
						icon: 'none'
					})
					return
				}
				if (this.audioHCStatus == 2) {
					uni.showToast({
						title: '音频生成失败',
						icon: 'none'
					})
					return
				}
				if (this.isPlay) {
					if (this.innerAudioContext.paused) {
						this.innerAudioContext.src = this.audioUrl;

						uni.showLoading({
							title: '加载音频中'
						})

						this.innerAudioContext.play()
					} else {
						this.innerAudioContext.stop()
					}
				} else {
					await this.contextInit();
					this.innerAudioContext.src = this.audioUrl;

					uni.showLoading({
						title: '加载音频中'
					})

					this.innerAudioContext.play()
				}






				// if (this.innerAudioContext.paused) {
				// 	this.innerAudioContext.src = this.audioUrl;

				// 	uni.showLoading({
				// 		title: '加载音频中'
				// 	})

				// 	this.innerAudioContext.play()
				// } else {
				// 	this.innerAudioContext.pause()
				// }
			},
			// 删除音频
			delAudio() {
				this.audioTitle = '';
				this.audioUrl = '';
				this.score = 0;
				this.audioId = '';
				if (this.timer) {
					clearInterval(this.timer)
				}
				if (this.innerAudioContext) {
					this.innerAudioContext.stop();
				}


			},
			// 登陆成功
			loginSuccess() {
				console.log('登录成功')
				this.historyVideoList = [];
				this.page = 1;
				this.getVideoList();
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage']
				})
				if (uni.getStorageSync("mobile") == '') {
					console.log('111')
					this.$refs.bindPhone.open();
				}
			},
			// 绑定手机号
			bindSuccess() {
				console.log('绑定手机号成功')
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage']
				})
				this.historyVideoList = [];
				this.page = 1;
				this.getVideoList();
			},
			checkDaili(type) {
				checkUserInfo({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res, 'checkUserInfo')
					if (res.errno == 0) {
						if (type == 1) {
							this.chooseVideo()
						} else if (type == 2) {
							this.addVideo()
						}

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				}).catch(err => {

				})
			},
			// 验证代理商信息 type==1视频 type==2音频
			checkPur(type) {
				// if(this.level==0) {
				// 	uni.showToast({
				// 		title: '请激活会员',
				// 		icon: 'none'
				// 	})
				// }else {
				// 	this.checkDaili(type);
				// }
				this.checkDaili(type);


			},
			// app端上传视频
			// chooseVideoStepTwoAPP(sizeType) {
			// 	var _this = this;
			// 	uni.chooseVideo({
			// 		sourceType: ['album'], // 可选择视频来源
			// 		camera: 'back', // 默认使用前置摄像头，可以指定 front 为前置
			// 		maxDuration: 60, // 最大视频录制时长，单位：秒
			// 		success: (res) => {
			// 			console.log('上传视频app', res)
			// 			_this.$refs.progressPop.open();
			// 			_this.uploadQiniuReauest(res.tempFilePath, '')
			// 		},
			// 		fail: (err) => {
			// 			console.log('选择视频失败：', err);
			// 		}
			// 	});
			// },
			chooseVideoStepTwoAPP(sizeType) {
					var _this = this;
					uni.chooseVideo({
						sourceType: ['album'], // 可选择视频来源
						camera: 'back', // 默认使用前置摄像头，可以指定 front 为前置
						maxDuration: 60, // 最大视频录制时长，单位：秒
						compressed: false,
						success: (res) => {
							// console.log('上传视频app', res)/ console.log('缩略图：',JSON.stringify(aa))
							_this.$refs.progressPop.open();
							_this.uploadQiniuReauestAPP(res.tempFilePath);
							
						},
						fail: (err) => {
							console.log('选择视频失败：', err);
						}
					});
					console.log('zouleme')
				
			},
			uploadQiniuReauestAPP(videoUrl){
				// uni.showLoading({
				// 	title: '上传中',
				// 	mask:true
				// })
							
				var timestamp = Date.now();
				var userId = uni.getStorageSync('userId');
				// var userId = 12;
				var name = userId + '/' + this.generateRandomString(8) + timestamp;
							
				var _this = this;
				
				getQiniuToken().then(res => {
					let token = res.data;
					console.log(res.data, '获取七牛token')
					_this.uploadTask = uni.uploadFile({
						filePath: videoUrl,
						name: 'file',
						url: completQiniuUploadUrl,
						timeout: 1000000,
						formData: {
							token: token,
							key: name
						},
						success: (uploadFileRes) => {
							uni.hideLoading()
							let logo = JSON.parse(uploadFileRes.data);
							console.log(logo, 'logo')
							if (logo.key) {
								console.log(qiniuDomainUrlD + logo.key, '上传路径');
								_this.videoPath = qiniuDomainUrlD + logo.key
								_this.getVideoThumbnail(_this.videoPath)
								// _this.videoYinseTiqu(_this.videoPath)
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'error'
								})
								_this.$refs.progressPop.close();
							}
							
						},
						fail: (err) => {
							uni.hideLoading()
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							})
							// reject(err)
						}
					})
					// 监听上传进度  
					_this.uploadTask.onProgressUpdate((res) => {
						// this.uploadPercent = res.progress; // 更新进度条  
						// console.log('上传进度', res.progress);
						this.percent = res.progress;
						if (this.percent >= 100) {
							this.$refs.progressPop.close();
							setTimeout(() => {
								this.percent = 0;
							}, 1000)
							
						}
					});
				})
			},
			// 网络视频 获取第一帧缩略图
			getVideoThumbnail(videoUrl){
				
				var _this = this;
				const inputData = {
					path: videoUrl,
					type: 2,//1本地 2网络
				};
				console.log('callVideoFrameInfo',callVideoFrameInfo,videoUrl)
				callVideoFrameInfo({
					data: inputData,
					success(res) {
						console.log('获取成功了', res);
				
						// _this.videoThumbnail = ;
						// var aaa = _this.getTempFilePath(_this.img64)
						var base64Data = res.base64;
						base64ToPath(base64Data)
							.then(path => {
								console.log('----', path);
								_this.$uploadAvatar(path).then(res => {
									console.log(res, 'uploadImg')
									if (res.data.errno == 1) {
										// _this.avatar_url = res.data.img
										_this.videoThumbnail = res.data.img;
										console.log(res.data.img, '缩略图')
										_this.setVideoLog(videoUrl, res.data.img);
									} else {
										uni.showToast({
											title: res.data.message,
											icon: 'none'
										})
									}
								
								
								}).catch(err => {
									console.log(err, 'err')
								
								})
								// uni.uploadFile({
								// 	url: _this.uploadUrl, //图片上传地址
								// 	formData: {
								// 		// 'folderType': types
								// 	},
								// 	filePath: path,
								// 	name: 'file',
								// 	success: (uploadFileRes) => {
								// 		console.log('uploadFileRes', uploadFileRes)
								// 		let logo = JSON.parse(uploadFileRes.data);
								// 		console.log(logo, 'logo')
								
								// 	},
								// 	fail: (err) => {
								// 		console.log('err', err)
								// 	}
								// });
								
							})
							.catch(error => {
								// 图片加载失败
								uni.hideLoading()
							})
						
					},
					fail(res) {
						console.log('获取失败了', res);
					}
				});
			},
			
			// 微信小程序上传视频
			chooseVideoStepTwo(sizeType) {
				console.log(sizeType)
				var _this = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['video'],
					sourceType: ['album'],
					sizeType: sizeType,
					success: (res) => {
						console.log(res, 'dddddd')
						_this.$refs.progressPop.open();
						// 现在可以将视频上传到服务器
						// console.log(this.videoPath, 'this.videoPath')
						// _this.uploadVideo(res.tempFilePath);
						// _this.uploadImg(res.thumbTempFilePath);
						// 在这里处理压缩后的视频路径 compressRes.tempFilePath
						_this.uploadQiniuReauest(res.tempFiles[0].tempFilePath, res
							.tempFiles[0]
							.thumbTempFilePath)
						// if (_this.modeValue == '标清') {
						// 	console.log(res.tempFiles[0].tempFilePath, res.tempFiles[0].thumbTempFilePath,'llllllll')
						// 	_this.compressVideo(res.tempFiles[0].tempFilePath, res.tempFiles[0].thumbTempFilePath)
						// } else {
						// 	// _this.uploadVideoQiniu(res.tempFiles[0].tempFilePath, res.tempFiles[0]
						// 	// 	.thumbTempFilePath);
						// 	_this.uploadQiniuReauest(res.tempFiles[0].tempFilePath, res.tempFiles[0].thumbTempFilePath)
						// }

						// uni.getVideoInfo({
						// 	src: res.tempFiles[0].tempFilePath,
						// 	success: function(compressRes) {
						// 		console.log('获取视频信息成功', compressRes);

						// 	},
						// 	fail: function(err) {
						// 		console.error('获取视频信息失败', err);
						// 	}
						// })


						// _this.uploadVideoQiniu(res.tempFiles[0].tempFilePath,res.tempFiles[0].thumbTempFilePath);
					},
					fail: (err) => {
						console.log('选择视频失败：', err);
					}
				})
			},
			chooseVideo() {
				var _this = this;
				var sizeType;
				// 获取手机系统信息
				uni.getSystemInfo({
					success: function(info) {
						console.log(info, 'info')
						var platform = info.platform;
						if (platform == 'ios') {
							// sizeType = _this.modeValue == '标清' ? ['compressed'] : ['compressed','original'];
							sizeType = _this.modeValue == '标清' ? ['compressed'] : [
								'original'
							];
							// #ifdef MP-WEIXIN
							_this.chooseVideoStepTwo(sizeType);
							// #endif
							// #ifdef APP || H5
							_this.chooseVideoStepTwoAPP(sizeType);
							// #endif
						} else {
							// sizeType = ['original','compressed'];
							sizeType = _this.modeValue == '标清' ? ['compressed',
								'original'
							] : ['original'];
							// #ifdef MP-WEIXIN
							_this.chooseVideoStepTwo(sizeType);
							// #endif
							// #ifdef APP || H5
							_this.chooseVideoStepTwoAPP(sizeType);
							// #endif
						}

					}
				});

				// let sizeType = ['original', 'compressed'];

				// uni.chooseVideo({
				// 	sourceType: ['album'], // 从相册或相机选择视频
				// 	camera: 'back', // 默认使用后置摄像头，可以指定front为前置
				// 	maxDuration: 60, // 视频最大持续时间，默认60秒
				// 	compressed:false,//是否压缩所选的视频源文件，默认值为 true，需要压缩。
				// 	success: (res) => {
				// 		console.log(res,'dddddd')
				// 		// 现在可以将视频上传到服务器
				// 		// console.log(this.videoPath, 'this.videoPath')
				// 		// _this.uploadVideo(res.tempFilePath);
				// 		// _this.uploadImg(res.thumbTempFilePath);
				// 		_this.uploadVideoQiniu(res.tempFilePath,res.thumbTempFilePath);
				// 	},
				// 	fail: (err) => {
				// 		console.log('选择视频失败：', err);
				// 		uni.showToast({
				// 			title: '选择失败',
				// 			icon: 'none'
				// 		})
				// 	}
				// });
			},
			compressVideo(videoUrl, imgUrl) {
				var _this = this;
				uni.compressVideo({
					src: videoUrl, // 视频文件路径
					quality: 'high', // 压缩质量 low size小 medium high size大
					// bitrate: compressRes.bitrate *0.5, //码率，单位 kbps（仅 iOS 支持）
					// fps: compressRes.bitrate * 0.5, //帧率（仅 iOS 支持）
					// resolution: compressRes.resolution, //相对于原视频的分辨率比例，取值范围(0, 1]（仅 iOS 支持）
					success: function(compressRes) {
						console.log('压缩成功', compressRes);
						// 在这里处理压缩后的视频路径 compressRes.tempFilePath
						// _this.uploadVideoQiniu(compressRes
						// 	.tempFilePath, imgUrl);
						_this.uploadQiniuReauest(compressRes.tempFilePath, imgUrl)
					},
					fail: function(err) {
						console.error('压缩失败', err);
					}
				});
			},
			uploadVideo(filePath) {
				var _this = this;
				_this.$uploadVideo(filePath).then(res => {
					console.log(res, 'uploadVideo')
					if (res.data.errno == 1) {
						_this.videoPath = res.data.img
						console.log(_this.videoPath, '上传视频')
						_this.setVideoLog(_this.videoPath);
						// if(!_this.innerAudioContext){
						// 	_this.contextInit();
						// }

						// uni.downloadFile({
						// 	url: _this.videoPath,
						// 	success: function(res) {
						// 		var filePath = res.tempFilePath;
						// 		console.log(res, 'reeeeee')
						// 		uni.saveVideoToPhotosAlbum({
						// 			filePath: res.tempFilePath,
						// 			success: res => {

						// 			}
						// 		})
						// 	},
						// 	fail: function(err) {
						// 		uni.hideLoading();
						// 		console.log(err, 'errr')
						// 		uni.showToast({
						// 			title: '下载失败',
						// 			icon: 'none'
						// 		})
						// 	}
						// })

					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}


				}).catch(err => {
					console.log(err, 'err')

				})


			},
			// 上传视频缩略图
			uploadImg(videoUrl, imgUrl) {
				console.log(imgUrl, 'imgUrl')
				// return
				var _this = this;
				_this.$uploadAvatar(imgUrl).then(res => {
					console.log(res, 'uploadImg')
					if (res.data.errno == 1) {
						// _this.avatar_url = res.data.img
						console.log(res.data.img, '缩略图')
						_this.setVideoLog(videoUrl, res.data.img);
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}


				}).catch(err => {
					console.log(err, 'err')

				})
			},
			// 七牛上传视频
			uploadVideoQiniu(videoUrl, imgUrl) {

				var _this = this;

				_this.$uploadVideoQiniu(videoUrl).then(res => {
					console.log(res, 'uploadVideo')
					_this.videoPath = res
					console.log(_this.videoPath, '上传视频')
					console.log(_this.videoPath, imgUrl, '.......')
					_this.uploadImg(_this.videoPath, imgUrl);
					// _this.setVideoLog(this.videoPath);


				}).catch(err => {
					console.log(err, 'err')

				})


			},
			// 获取音频时长获取积分
			getNeedScore(audioUrl) {
				uni.showLoading({
					title: '获取积分中'
				})
				getAudioDuration({
					uid: uni.getStorageSync("userId"),
					Audiourl: audioUrl
				}).then(res => {
					uni.hideLoading();
					console.log(res, '获取音频时长获取积分')
					this.score = res.data.integral;
					this.duration = res.data.duration; //时长
				}).catch(err => {
					uni.hideLoading();
				})
			},
			addVideo() {
				uni.navigateTo({
					url: '/pagesCreate/addAudioOption/index?toOptionType=1' + '&videoPath=' +
						this.videoPath +
						'&modeValue=' + this.modeValue +'&videoThumbnail=' + this.videoThumbnail
				})
			},
			// 生成
			create() {
				// this.addZimu('51734')
				// return
				// if(this.level == 0){
				// 	uni.showToast({
				// 		title: '请激活用户',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (this.videoPath == '') {
					uni.showToast({
						title: '请上传视频',
						icon: 'none'
					})
					return
				}
				if (this.audioUrl == '') {
					uni.showToast({
						title: '请上传音频',
						icon: 'none'
					})
					return
				}
				if (!this.checked) {
					uni.showToast({
						title: '请阅读并勾选协议',
						icon: 'none'
					})
					return
				}
				checkUserInfo({
					uid: uni.getStorageSync("userId")
				}).then(res => {
					console.log(res, 'checkUserInfo')
					if (res.errno == 0) {
						this.openShowIntegalPop();

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

				}).catch(err => {

				})
				// this.showPop1 = true;

				// this.isLoading = true

				// this.isVerify();


			},
			toAudioHome() {
				uni.navigateTo({
					url: '/pagesHome/audioList/index?videoPath=' + this.videoPath + '&videoThumbnail=' + this.videoThumbnail
				})
			},
			// 字体rpx转换成pt
			rpxTranPt(value) {
				// 获取屏幕宽度
				const screenWidth = uni.getSystemInfoSync().windowWidth;

				// 计算 rpx 到像素的转换比例
				const scale = screenWidth / 750;

				// 假设你有一个 rpx 值
				const rpxValue = value;

				// 将 rpx 转换为像素
				const pxValue = rpxValue * scale;

				// 将像素转换为 pt（这里假设屏幕 DPI 为 96）
				const ptValue = pxValue / (96 / 72); // 或者 pxValue * (72 / 96)

				console.log(`${rpxValue}rpx 等于 ${Math.round(ptValue)}pt`);
				return Math.round(ptValue)
			},
			// 添加字幕
			addZimu(id) {

				// var y = Number((this.y + (this.MovableViewH / 2) - 1) / this.MovableAreaH).toFixed(2)
				// var yy = y > 0.9 ? (y - 0.03) : y
				// var params = {
				// 	color: this.colorselect,
				// 	// font: this.font,
				// 	font: this.font == 'default' ? (this.font + '-' + this.platform) : this.font,
				// 	// size: this.fontSizeValue / 2,
				// 	// size: this.fontSizeValue * 3,
				// 	size: 70,
				// 	stroke_color: this.strokeColor,
				// 	stroke_width: this.strokeWidth,
				// 	// position: [Number((this.x + 10) / 185).toFixed(2), Number((this.y < 297 ? this.y : this.y-23) / 328).toFixed(2)]
				// 	position: [0.5, y]
				// }


				// 第一套参数 开始
				// var params = {
				// 	color: this.colorselect,
				// 	font: this.font == 'default' ? (this.font + '-' + this.platform) : this.font,
				// 	size: this.fontSizeValue / 2,
				// 	stroke_color: this.strokeColor,
				// 	stroke_width: this.strokeWidth,
				// 	position: [Number((this.x + 10) / 185).toFixed(2), Number((this.y < 297 ? this.y : this.y-23) / 328).toFixed(2)]
				// }


				// 第二套参数 开始
				var y = this.MovableAreaH - this.MovableViewH - this.y - 1 + Math.ceil(this.MovableViewH / 2);
				var marginV = Math.ceil((276 * y) / this.MovableAreaH)
				var params = {
					color: this.colorselect,
					font: this.font == 'default' ? (this.font + '-' + this.platform) : this.font,
					size: this.fontSizeValue / 2,
					stroke_color: this.strokeColor,
					stroke_width: this.strokeWidth / 2,
					marginL: 10,
					// marginV:246,
					marginV: marginV,
				}
				// var params = {
				// 	color: "#00F5FF",
				// 	size: 22,
				// 	font: "scjs-kufang",
				// 	stroke_color: "#FFFFFF",
				// 	stroke_width: 1,
				// 	marginL: 10,
				// 	marginV: 39
				// }
				addCaptions({
					style: JSON.stringify(params),
					id: id,
					uid: uni.getStorageSync("userId")
				}).then(res => {
					if (res.errno == 0) {
						this.showPop1 = false;
						this.audioUrl = '';
						this.videoPath = '';
						this.videoTitle = '';
						this.audioTitle = '';
						this.audioId = '';
						this.score = 0;
						// uni.removeStorageSync("createAgreeCheck")
						// this.innerAudioContext.src = '';
						// this.innerAudioContext.stop()
						// this.innerAudioContext.destroy()
						this.innerAudioContext = null;
						setTimeout(() => {
							// uni.hideLoading();
							this.$refs.loadingPop.close();
							uni.switchTab({
								url: '/pages/mine/index'
							})
						}, 500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			},
			hecheng4() {
				console.log(this.isLoading, 'this.isLoading1')
				// uni.request({
				// 	url: baseURL1 + 'v1.video/new_shipin', //接口地址：前缀+方法中传入的地址    
				// 	method: "POST", //请求方法：传入的方法或者默认是“GET”    
				// 	data: {
				// 		uid: uni.getStorageSync("userId"),
				// 		audioUrl: this.audioUrl,
				// 		srcVideoUrl: this.videoPath,
				// 		integral: this.score,
				// 		title: this.videoTitle,
				// 		is_zhanshi: uni.getStorageSync("isDetailAgree") ? uni.getStorageSync("isDetailAgree") : 1
				// 	}, //传递参数：传入的参数或者默认传递空集合    
				// 	header: {},
				// 	success: (
				// 		res
				// 	) => {

				// 		if(res.data.errno == 0){
				// 			this.showPop1 = false;
				// 			this.audioUrl = '';
				// 			this.videoPath = '';
				// 			this.videoTitle = '';
				// 			this.audioTitle = '';
				// 			this.audioId = '';
				// 			this.score = 0;
				// 			// uni.removeStorageSync("createAgreeCheck")
				// 			// this.innerAudioContext.src = '';
				// 			// this.innerAudioContext.stop()
				// 			// this.innerAudioContext.destroy()
				// 			this.innerAudioContext = null;

				// 		}else if (res.data.errno == 1) {
				// 			this.isLoading = false;
				// 			uni.showToast({
				// 				title: res.data.msg,
				// 				icon: 'none'
				// 			})


				// 		} else if (res.data.errno == 401) {

				// 			uni.navigateTo({
				// 				url: '/pages/login/index'
				// 			})

				// 		} else {
				// 			uni.hideLoading();
				// 			this.isLoading = false;
				// 			uni.showToast({
				// 				title: '出错了',
				// 				icon: 'none'
				// 			})
				// 		}
				// 	}, // 这里的接口请求，如果出现问题就输出接口请求失败    
				// 	fail: (err) => {
				// 		uni.hideLoading();
				// 		this.isLoading = false;
				// 		uni.showToast({
				// 			title: '出错了',
				// 			icon: 'none'
				// 		})
				// 	},
				// })

				newShipin({
					uid: uni.getStorageSync("userId"),
					audioUrl: this.audioUrl,
					srcVideoUrl: this.videoPath,
					integral: this.score,
					title: this.videoTitle,
					is_zhanshi: uni.getStorageSync("isDetailAgree") ? uni.getStorageSync(
						"isDetailAgree") : 1,
					qingxi: this.modeValue == "标清" ? this.modeValue : this.modeValue.replace(
						"高清(上传慢)", "高清"),
					is_zimu: this.isZimu ? 1 : 0,
					img: this.videoThumbnail
				}).then(res => {

					console.log(res, 'res');
					this.isLoading = false;
					if (res.errno == 0) {
						if (this.isZimu) {
							this.addZimu(res.data)
						} else {
							this.showPop1 = false;
							this.audioUrl = '';
							this.videoPath = '';
							this.videoTitle = '';
							this.audioTitle = '';
							this.audioId = '';
							this.score = 0;
							// uni.removeStorageSync("createAgreeCheck")
							// this.innerAudioContext.src = '';
							// this.innerAudioContext.stop()
							// this.innerAudioContext.destroy()
							this.innerAudioContext = null;
							setTimeout(() => {
								// uni.hideLoading();
								this.$refs.loadingPop.close();
								uni.switchTab({
									url: '/pages/mine/index'
								})
							}, 500)
						}


					} else {
						this.isLoading = false;
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.$refs.loadingPop.close();
					}


				}).catch(err => {
					uni.hideLoading();
					this.isLoading = false;
					this.$refs.loadingPop.close();
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					})
					console.log(err, 'err')
				})
			},
			hecheng3() {
				uni.request({
					url: 'https://terminator2.axu9.com/api/v1.video/lipsync', //接口地址：前缀+方法中传入的地址    
					method: "POST", //请求方法：传入的方法或者默认是“GET”    
					data: {
						uid: uni.getStorageSync("userId"),
						audioUrl: this.audioUrl,
						videoUrl: this.videoPath,
						integral: this.score,
						title: this.videoTitle
					},
					success: (
						res
					) => { //返回的数据（不固定，看后端接口，这里是做了一个判断，如果不为true，用uni.showToast方法提示获取数据失败)     // 如果不满足上述判断就输出数据     
						// console.log(res.data.code,'uni.request',options.url)

					}, // 这里的接口请求，如果出现问题就输出接口请求失败    
					fail: (err) => {},
				})
			},
			submit() {
				// if (this.videoTitle == '') {
				// 	uni.showToast({
				// 		title: '视频标题不能为空',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (this.isLoading) {
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none'
					})
					return
				}
				this.isLoading = true;
				this.$refs.integalPop.close();
				this.$refs.loadingPop.open();
				console.log(this.isLoading, 'this.isLoading')
				this.hecheng4();




				// lipsync({
				// 	uid: uni.getStorageSync("userId"),
				// 	audioUrl: this.audioUrl,
				// 	videoUrl: this.videoPath,
				// 	integral: this.score,
				// 	title: this.videoTitle
				// }).then(res => {
				// 	console.log(res, 'res')
				// 	// uni.hideLoading();
				// 	// if(res.errno == 0){
				// 	// 	this.showPop1 = false;
				// 	// 	this.audioUrl = '';
				// 	// 	this.videoPath = '';
				// 	// 	this.videoTitle = '';
				// 	// 	this.score = 0;
				// 	// 	uni.switchTab({
				// 	// 		url: '/pages/mine/index'
				// 	// 	})
				// 	// }else {
				// 	// 	uni.showToast({
				// 	// 		title: res.msg,
				// 	// 		icon: 'none'
				// 	// 	})
				// 	// }
				// }).catch(err => {
				// 	uni.hideLoading();
				// 	console.log(err, 'err')
				// })
				// this.showPop1 = false;
				// this.audioUrl = '';
				// this.videoPath = '';
				// this.videoTitle = '';
				// this.audioTitle = '';
				// this.score = 0;
				// this.innerAudioContext.src = '';
				// this.innerAudioContext.stop()
				// this.innerAudioContext.destroy()

				// setTimeout(()=>{
				// 	uni.hideLoading();
				// 	uni.switchTab({
				// 		url: '/pages/mine/index'
				// 	})
				// },2000)


			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/deep/ .u-radio__icon-wrap {
		font-size: 13px !important;
	}

	/deep/ .u-radio__label {
		color: #00e18e !important;
		font-size: 24rpx !important;
	}

	/deep/ .u-radio-group {
		width: 100%;
		white-space: nowrap;
	}

	/deep/ .u-checkbox__icon-wrap--checked .u-icon {
		height: 100% !important;
		display: flex;
		align-items: center;
	}

	/deep/ .u-checkbox__label {
		color: #00e18e !important;
		font-size: 24rpx !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);


	.mt-17 {
		/* margin-top: 34rpx; */
	}

	.mt-10 {
		margin-top: 10rpx;
	}

	page {
		background-color: #111113;
	}

	.page {

		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding: 35rpx 0 49rpx;
	}

	.section-zimu {
		/* padding-top: 35rpx; */
	}



	.group {
		margin-top: 43rpx;
		padding: 0 30rpx;
		padding-bottom: 150rpx;
	}

	.group-zimu {
		padding: 0 30rpx;
	}

	.section_2 {
		/* padding: 276rpx 0 282rpx; */
		height: 656rpx;
		width: 369rpx;
		background-color: #212123;
		border-radius: 8rpx;
		width: 370rpx;
		border: 1rpx solid #414141;
	}

	.section_2_wrap {
		height: 656rpx;
	}

	.history-list {
		/* width: 140rpx; */
		/* height: 656rpx; */
		/* overflow-y: scroll; */
		/* padding: 20rpx; */
	}


	.image_2 {
		margin-right: 6rpx;
		width: 35rpx;
		height: 35rpx;
	}

	.add-video-img {
		width: 134rpx;
		height: 113rpx;
		margin-bottom: 41rpx;
	}

	.del-img {
		width: 22rpx;
		height: 22rpx;
	}
	.play-img {
		width: 60rpx;
		height: 60rpx;
	}
	.play-img-wrap {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}

	.del-video {
		position: absolute;
		right: 0;
		top: 0;
		width: 60rpx;
		height: 60rpx;
		border-radius: 0 0 0 50%;
		background-color: #fff;
		text-align: center;
		line-height: 60rpx;
	}
	

	.font {
		font-size: 32rpx;
		font-family: PingFang SC;
		/* line-height: 31rpx; */
		font-weight: 500;
		color: #ffffff;
	}

	.section_3 {
		padding: 26rpx 29rpx 29rpx;
		background-color: #212123;
		border-radius: 16rpx;
	}

	.select-audio {
		border-radius: 29rpx;
		width: 160rpx;
		height: 60rpx;
		border: 2rpx solid #00e586;
		color: #00e586;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 60rpx;
		text-align: center;
	}

	.section_4 {
		background-color: #1a1a1c;
		border-radius: 20rpx;
		height: 100rpx;
		border: 1rpx solid #444446;
		padding-left: 20rpx;

	}

	.image_3 {
		width: 30rpx;
		height: 30rpx;
		margin-right: 14rpx;
	}


	.text_2 {
		color: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 29rpx;
	}

	.group_2 {
		position: fixed;
		bottom: 20rpx;
		left: 0;
	}

	.section_5 {
		margin: 0 30rpx;
		width: 690rpx;
		background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
		border-radius: 50rpx;
		height: 100rpx;
	}

	.image_check {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}



	.video-wrap {
		height: 656rpx;
		width: 370rpx;
	}

	.video-class {
		width: 370rpx;
		height: 655rpx;
	}

	.ml-3-5 {
		margin-left: 7rpx;
	}

	.section_33 {
		padding: 27rpx 18rpx 17rpx;
		background-color: #39444069;
		border-radius: 20rpx;
	}

	.section_33_lf {
		width: 90%;
	}

	.image_33 {
		width: 81rpx;
		height: 74rpx;
	}

	.image_34 {
		width: 33rpx;
		height: 36rpx;
	}

	.text_44 {
		color: #ffffff;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 31rpx;
		width: 100%;
		word-break: break-all;
	}

	.text_status {
		color: #00e586;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 31rpx;
	}

	.num {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
		color: #ffffff;
		margin-bottom: 20rpx;
	}

	.num-green {
		color: #00e489;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 30rpx;
		margin: 0 6rpx;
	}

	.popup1 {
		/* // margin-right: 40rpx; */
		padding: 59rpx 28rpx 30rpx;
		border-radius: 32rpx;
		background-image: url('https://terminator.axu9.com/images/video-pop-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 615rpx;
		/* // height: 616rpx; */
	}

	.title1 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.input-wrap {
		padding: 41rpx 0;
		border-radius: 16rpx;
		width: 542rpx;
		border: 1rpx solid #ffffff;
		margin-top: 35rpx;
	}

	.input-class1 {
		margin-left: 30rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
	}

	.input-placeholder1 {
		color: #ffffff;
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
	}


	.bottom-btn {
		margin-top: 35rpx;
	}

	.agree-btn {
		padding: 34rpx 0;
		flex: 1 1 257rpx;
		border-radius: 16rpx;
		height: 102rpx;
		border-left: solid 2rpx #00e586;
		border-right: solid 2rpx #00e586;
		border-top: solid 2rpx #00e586;
		border-bottom: solid 2rpx #00e586;
	}

	.font-agree {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 500;
	}

	.noagree-btn {
		margin-right: 5rpx;
		padding: 34rpx 0;
		flex: 1 1 257rpx;
		background-image: linear-gradient(90deg, #00ccbb 0%, #00e586 100%);
		border-radius: 16rpx;
		height: 100rpx;
	}

	.border-green {
		border: 1rpx solid #08f9a7;
	}

	.video-poster {
		/* width: 327rpx; */
		height: 140rpx;
		width: 140rpx;
		/* height: 450rpx; */
		border-radius: 14rpx;
		/* margin-bottom: 20rpx; */
		/* border: 1rpx solid red; */
	}

	.close-video-img-wrap {
		position: absolute;
		right: -20rpx;
		top: -15rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #00e489;
	}

	.close-video-img {
		width: 20rpx;
		height: 20rpx;

	}

	.agreement-text1 {
		color: #999999;
		font-weight: 400;
		font-face: PingFang SC;
		font-size: 24rpx;
	}

	.agreement-text2 {
		color: #00db9c;
		font-weight: 500;
		font-face: PingFang SC;
		font-size: 24rpx;
	}






	.A-B {
		/* width: 208rpx;
		height: 82rpx; */
		/* min-width: 180rpx; */
		/* max-width: 100%; */
		width: 366rpx;
		height: 62rpx;
		border: 1rpx solid #00FF00;
		justify-content: center;
		align-items: center;
		display: flex;
		color: #ffffff;
		/* position: relative; */
		border-radius: 4rpx;
	}

	.movable-view-wrap {
		width: 100%;
		height: 62rpx;
	}

	.top-square {
		width: 31rpx;
		height: 11rpx;
		border-radius: 5rpx;
		background: #ffffff;
		position: absolute;
		top: -6rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.bottom-square {
		width: 31rpx;
		height: 11rpx;
		border-radius: 5rpx;
		background: #ffffff;
		position: absolute;
		bottom: -6rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.left-square {
		width: 11rpx;
		height: 31rpx;
		border-radius: 5rpx;
		background: #ffffff;
		position: absolute;
		top: 50%;
		left: -6rpx;
		transform: translateY(-50%);
	}

	.right-square {
		width: 11rpx;
		height: 31rpx;
		border-radius: 5rpx;
		background: #ffffff;
		position: absolute;
		top: 50%;
		right: -6rpx;
		transform: translateY(-50%);
	}

	.rg-top-circle {
		width: 25rpx;
		height: 25rpx;
		background: #ffffff;
		position: absolute;
		top: -12.5rpx;
		right: -12.5rpx;
		border-radius: 50%;
	}

	.lf-bottom-circle {
		width: 25rpx;
		height: 25rpx;
		background: #ffffff;
		position: absolute;
		bottom: -12.5rpx;
		left: -12.5rpx;
		border-radius: 50%;
	}

	.rg-bottom-circle {
		width: 25rpx;
		height: 25rpx;
		background: #ffffff;
		position: absolute;
		bottom: -12.5rpx;
		right: -12.5rpx;
		border-radius: 50%;
	}

	.close-icon {
		width: 38rpx;
		height: 38rpx;
		position: absolute;
		left: -19rpx;
		top: -19rpx;
	}

	.image-close {
		width: 100%;
		height: 100%;
	}

	.bottom-pop {
		width: 100%;
		/* height: 632rpx; */
		/* max-height: calc(100vh - 656rpx - 204rpx); */
		border-radius: 24rpx 24rpx 0 0;
		background: #212123;
		/* overflow-y: scroll; */
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.bottom-pop-content {}

	.bt-title-lf {
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.bt-title-img {
		width: 56rpx;
		height: 55rpx;
	}

	.image-ok {
		width: 100%;
		height: 100%;
	}

	.bt-title {
		padding: 26rpx 31rpx;
	}

	.nocss-image {
		width: 56rpx;
		height: 56rpx;
		margin-right: 20rpx;
	}

	.input-class {
		color: #fff;
	}

	.placehoder-class {
		color: #fff;
	}


	.yk_fontUl {
		width: 100%;
		padding: 26rpx 31rpx;
		overflow-x: scroll;
	}

	.yk_fontli {
		/* width: 152rpx;
		height: 56rpx; */
		border-radius: 4rpx;
		background: #313133;
		padding: 10rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
	}

	.yk_fontTilte {
		height: 100%;
	}

	.stoke {
		width: 100%;
		padding: 26rpx 31rpx;
		overflow-x: scroll;
	}

	.csstype-list {
		padding: 26rpx 31rpx;
	}

	.csstype-list-item {
		color: #fff;
		margin-right: 46rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #97979D;
	}

	.csstype-list-item.active {
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.no-color-icon {
		width: 38rpx;
		height: 38rpx;
		margin-right: 20rpx;
	}

	.color-list {
		width: 100%;
		overflow-x: scroll;
		/* margin-top: 42rpx;
		margin-bottom: 38.5rpx; */
	}

	.color-list-tb {
		margin-top: 42rpx;
		margin-bottom: 38.5rpx;
	}

	.color-list-item {
		width: 38rpx;
		height: 58rpx;
	}

	.color-list-item-active {
		width: 48rpx;
		height: 70rpx;
		border-radius: 4rpx;
	}

	.csstype-list-slider-wrap {
		width: 100%;
	}

	.csstype-list-slider {
		width: 80%;
	}

	.csstype-list-slider-text {
		color: #fff;
		font-weight: 600;
		font-size: 28rpx;
	}

	.csstype-list-slider-text1 {
		color: #fff;
		font-weight: 400;
		font-size: 24rpx;
	}

	.border-green {
		border: 1rpx solid #00FF00;
	}





	@font-face {
		font-family: 'albb-puhui';
		src: url('https://audiovideo.axa2.com/ziti/albb-puhui.ttf');
	}

	@font-face {
		font-family: 'almm-fangyuan';
		src: url('https://audiovideo.axa2.com/ziti/almm-fangyuan.ttf');
	}

	@font-face {
		font-family: 'az-paopao';
		src: url('https://audiovideo.axa2.com/ziti/az-paopao.ttf');
	}

	@font-face {
		font-family: 'cefb-ti';
		src: url('https://audiovideo.axa2.com/ziti/cefb-ti.ttf');
	}

	@font-face {
		font-family: 'dy-meihao';
		src: url('https://audiovideo.axa2.com/ziti/dy-meihao.otf');
	}

	@font-face {
		font-family: 'hlbs-jian';
		src: url('https://audiovideo.axa2.com/ziti/hlbs-jian.ttf');
	}

	@font-face {
		font-family: 'hxy-erti';
		src: url('https://audiovideo.axa2.com/ziti/hxy-erti.ttf');
	}

	@font-face {
		font-family: 'hzct-shoushu';
		src: url('https://audiovideo.axa2.com/ziti/hzct-shoushu.ttf');
	}

	@font-face {
		font-family: 'lh-yinshu';
		src: url('https://audiovideo.axa2.com/ziti/lh-yinshu.ttf');
	}

	@font-face {
		font-family: 'pfpf-hutuPF';
		src: url('https://audiovideo.axa2.com/ziti/pfpf-hutuPF.otf');
	}

	@font-face {
		font-family: 'scjs-kangkang';
		src: url('https://audiovideo.axa2.com/ziti/scjs-kangkang.ttf');
	}

	@font-face {
		font-family: 'scjs-kufang';
		src: url('https://audiovideo.axa2.com/ziti/scjs-kufang.ttf');
	}

	@font-face {
		font-family: 'wdpljb-song';
		src: url('https://audiovideo.axa2.com/ziti/wdpljb-song.ttf');
	}

	@font-face {
		font-family: 'wzs-fang';
		src: url('https://audiovideo.axa2.com/ziti/wzs-fang.ttf');
	}

	@font-face {
		font-family: 'yrdz-shi';
		src: url('https://audiovideo.axa2.com/ziti/yrdz-shi.ttf');
	}

	@font-face {
		font-family: 'ysyr-xiaokai';
		src: url('https://audiovideo.axa2.com/ziti/ysyr-xiaokai.ttf');
	}

	@font-face {
		font-family: 'yz-zi';
		src: url('https://audiovideo.axa2.com/ziti/yz-zi.ttf');
	}

	@font-face {
		font-family: 'zk-kuaile';
		src: url('https://audiovideo.axa2.com/ziti/zk-kuaile.ttf');
	}

	@font-face {
		font-family: 'ztcq-tezhan';
		src: url('https://audiovideo.axa2.com/ziti/ztcq-tezhan.ttf');
	}

	@font-face {
		font-family: 'ztsj-fagun';
		src: url('https://audiovideo.axa2.com/ziti/ztsj-fagun.ttf');
	}

	@font-face {
		font-family: 'default';
		src: url('https://audiovideo.axa2.com/ziti/SourceHanSerifCN-Bold.otf')
			/* src: url('https://audiovideo.axa2.com/ziti/default.otf') */
	}





	.stroked-text {
		/* text-shadow:   
	       -1px -1px 0 #ff0000,
	        1px -1px 0 #ff0000,
	       -1px  1px 0 #ff0000,
	        1px  1px 0 #ff0000; 
	     color: #0000ff;
	     font-size: 24px; */
		font-size: 50rpx;
		font-weight: 600;
		/* text-shadow:
			-1px -1px 0 #ff0000,
			1px -1px 0 #ff0000,
			-1px 1px 0 #ff0000,
			1px 1px 0 #ff0000; */
		box-sizing: content-box;
		-webkit-background-clip: text;
		/* 确保背景颜色仅应用于文字 */
		/* -webkit-text-fill-color: green; */
		/* 设置文字填充颜色为透明，以显示背景颜色 */
		/* display: inline-block; */
		/* 或者其他适合的布局方式 */
		width: 56rpx;
		height: 56rpx;
		border-radius: 8rpx;
		background: #313133;
		margin-right: 20rpx;
	}




	/* 添加简单的黑色描边 */
	/* .text-shadow-simple {
		width: 200rpx;
		height: 200rpx;
		background-color: red;
	  
	  color: #fff;
	  font-size: 60rpx;
	  text-shadow: 
	      -4px -4px 4px #000,
	      4px -4px 4px #000,
	      -4px 4px 4px #000,
	      4px 4px 4px #000;
	} */
	.text {
		font-size: 150px;
		color: white;
		font-weight: 400;
	}

	.text-shadow-simple {
		/* -webkit-text-stroke: 8px red; */
		font-size: 150px;
		color: white;
		font-weight: 400;
	}


	.text111 {
		/* font-size: var(--fontSize); */
		/* color: var(--fontColor); */
		font-weight: 400;
		position: relative;
		z-index: 0;
		/* height: 62rpx;
		line-height: 62rpx; */
	}

	.text111::after {
		content: attr(data-content);
		-webkit-text-stroke: var(--width) var(--color);
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}

	/* .stroke {
	-webkit-text-stroke: 4px #000;
} */
	.text {
		font-size: 150px;
		fill: white;
		font-weight: 400;
	}

	.stroke {
		stroke: red;
		stroke-width: 4px;
	}


	.cover-content {
		position: absolute;
		right: 0;
		top: 0;
		transform: translate(-50%, -50%);
		width: 100px;
		height: 50px;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>